导航：ColorStateList和RadioGroup

作者: 大道至简峰 | 来源:发表于2016-03-18 22:46 被阅读200次

用到的图片资源下载地址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);
    }
}

导航：ColorStateList和RadioGroup

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读