导航：ColorStateList和RadioGroup

用到的图片资源下载地址http://pan.baidu.com/s/1geqo6iB 密码：fuv0

ColorStateList可以根据View的状态来设置View的颜色，例如背景色，文字颜色等等。用xml定义ColorStateList时，要定义在res/color文件夹中。例如，我们在res/color下写了一个bg_edit.xml。如下所示：

colorstatelist22.png

然后我们设置具有输入事件的EditText的字体的颜色引用为该xml文件。如下代码所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <!--
        android:textColor="@color/bg_edit"
        设置EditTexit的字体颜色为引用bg_edit.xml中定义的ColorStateList
    -->
    <EditText
        android:textColor="@color/bg_edit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="text" >
    </EditText>
    
     <EditText
        android:textColor="@color/bg_edit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="text" >
    </EditText>

</LinearLayout>

然后运行该示例，就可以看见如下的效果：

Untitled.gif

可以看到，当EditText得到焦点时，文字的颜色变为红色，否则变为绿色。

有了上面的铺垫，我们就可以实现如下的效果：

navigation.gif

示例的底部导航使用的是RadioGroup和RadioButton，中间的内容区域使用的是Fragment。RadioGroup中的一组RadioButton每次只能选择其中一个。RadioButton具有checked属性，因此我们可以在res/color文件夹下定义一个ColorStateList，根据RadioButton是否被checked来设置RadioButton的字体颜色。而RadioButton的背景图片可以使用类似的思路在res/drawable文件夹下写一个xml文件，根据RadioButton是否被checked来设置其背景图片。

main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- Fragment的容器 -->
    <FrameLayout
        android:id="@+id/fragment_root"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

    <!-- 底部导航按钮 -->
    <RadioGroup
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#F0F0F0"
        android:orientation="horizontal"
        android:padding="8dp" >

        <!-- 
            android:button="@null"
                这条属性取消RadioButton前面的小圆圈
            android:textColor="@color/tab_text_color" 
                这条属性设置文本的颜色根据该RadioButton的状态的变化而变化
            android:drawableTop="@drawable/bg_home"
                这条属性在RadioButton的顶部绘制一个图形，这个图形也会根据RadioButton的状态的变化而变化
         -->
        <RadioButton
            android:id="@+id/home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/bg_home"
            android:gravity="center"
            android:text="@string/home"
            android:textColor="@color/tab_text_color" />

        <RadioButton
            android:id="@+id/friends"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_friends"
            android:gravity="center"
            android:text="@string/friends"
            android:textColor="@color/tab_text_color" />

        <RadioButton
            android:id="@+id/message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_message"
            android:gravity="center"
            android:text="@string/message"
            android:textColor="@color/tab_text_color" />

        <RadioButton
            android:id="@+id/personal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_personal"
            android:gravity="center"
            android:text="@string/personal"
            android:textColor="@color/tab_text_color" />
    </RadioGroup>

</LinearLayout>

res/color/tab_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--RadioButton被checked时，设置其颜色为#00B7FA-->
    <item android:state_checked="true" android:color="#00B7FA"/>
    <!--RadioButton没有被checked时，设置其颜色为#818181-->
    <item android:state_checked="false" android:color="#818181"/>
</selector>

res/drawable-hdip/bg_home.xml

<?xml version="1.0" encoding="utf-8"?>
<!--根据RadioButton是否被checked来设置其背景图片-->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/tab_home_pressed"/>
    <item android:state_checked="false" android:drawable="@drawable/tab_home"/>
</selector>

res/drawable-hdip/bg_friends.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/tab_friends_pressed"/>
    <item android:state_checked="false" android:drawable="@drawable/tab_friends"/>
</selector>

res/drawable-hdip/bg_message

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/tab_message_pressed"/>
    <item android:state_checked="false" android:drawable="@drawable/tab_message"/>
</selector>

res/drawable-hdip/bg_personal

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/tab_personal_pressed"/>
    <item android:state_checked="false" android:drawable="@drawable/tab_personal"/>
</selector>

layout/fragment_home

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center"
    >
    
    <TextView 
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="8dp"
        android:textSize="30sp"
        android:text="@string/this_is_home_page"
        />

</LinearLayout>

layout/fragment_friends.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="8dp"
        android:text="@string/this_is_friends_page"
        android:textSize="30sp" />

</LinearLayout>

layout/fragment_message.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    

    <TextView 
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="8dp"
        android:textSize="30sp"
        android:text="@string/this_is_message_page"
        />
</LinearLayout>

layout/fragment_personal.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    
    <TextView 
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="8dp"
        android:textSize="30sp"
        android:text="@string/this_is_personal_page"
        />
    
</LinearLayout>

MainActivity.java

package com.ddzj.navigation;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends Activity {

    private FragmentManager mFragmentManager;
    private Fragment mHomeFragment = new HomeFragment();
    private Fragment mFriendsFragment = new FriendsFragment();
    private Fragment mMessageFragment = new MessageFragment();
    private Fragment mPersonalFragment = new PersonalFragment();
    private RadioGroup mNavigation;
    
    private OnCheckedChangeListener mNavigationListener = new OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.home:
                mFragmentManager.beginTransaction().replace(R.id.fragment_root, mHomeFragment).commit();
                break;
            case R.id.friends:
                mFragmentManager.beginTransaction().replace(R.id.fragment_root, mFriendsFragment).commit();
                break;
            case R.id.message:
                mFragmentManager.beginTransaction().replace(R.id.fragment_root, mMessageFragment).commit();
                break;
            case R.id.personal:
                mFragmentManager.beginTransaction().replace(R.id.fragment_root, mPersonalFragment).commit();
                break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mNavigation = (RadioGroup) findViewById(R.id.navigation);
        mNavigation.setOnCheckedChangeListener(mNavigationListener);
        mFragmentManager = getFragmentManager();
        mFragmentManager.beginTransaction().add(R.id.fragment_root, mHomeFragment).commit();
    }
}

HomeFragment.java

package com.ddzj.navigation;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_home, null);
    }
}

FriendsFragment.java

package com.ddzj.navigation;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_friends, null);
    }
}

MessageFragment.java

package com.ddzj.navigation;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_message, null);
    }
}

PersonalFragment.java

package com.ddzj.navigation;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_personal, null);
    }
}

最后编辑于：2017.12.03 03:16:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,277评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,689评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,624评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,356评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,402评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,292评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,135评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,992评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,429评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,636评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,785评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,492评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,092评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,723评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,858评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,891评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,713评论 2赞 354

导航：ColorStateList和RadioGroup

推荐阅读更多精彩内容