用到的圖片資源下載地址http://pan.baidu.com/s/1geqo6iB 密碼:fuv0
ColorStateList
可以根據(jù)View
的狀態(tài)來(lái)設(shè)置View
的顏色,例如背景色,文字顏色等等。用xml定義ColorStateList
時(shí),要定義在res/color
文件夾中继找。例如,我們?cè)?code>res/color下寫(xiě)了一個(gè)bg_edit.xml
。如下所示:
然后我們?cè)O(shè)置具有輸入事件的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"
設(shè)置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>
然后運(yùn)行該示例,就可以看見(jiàn)如下的效果:
可以看到疲迂,當(dāng)EditText
得到焦點(diǎn)時(shí)才顿,文字的顏色變?yōu)榧t色,否則變?yōu)榫G色尤蒿。
有了上面的鋪墊郑气,我們就可以實(shí)現(xiàn)如下的效果:
示例的底部導(dǎo)航使用的是RadioGroup
和RadioButton
,中間的內(nèi)容區(qū)域使用的是Fragment
腰池。RadioGroup
中的一組RadioButton
每次只能選擇其中一個(gè)尾组。RadioButton
具有checked
屬性忙芒,因此我們可以在res/color
文件夾下定義一個(gè)ColorStateList
,根據(jù)RadioButton
是否被checked來(lái)設(shè)置RadioButton
的字體顏色讳侨。而RadioButton
的背景圖片可以使用類(lèi)似的思路在res/drawable
文件夾下寫(xiě)一個(gè)xml文件呵萨,根據(jù)RadioButton
是否被checked
來(lái)設(shè)置其背景圖片。
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>
<!-- 底部導(dǎo)航按鈕 -->
<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"
這條屬性設(shè)置文本的顏色根據(jù)該RadioButton的狀態(tài)的變化而變化
android:drawableTop="@drawable/bg_home"
這條屬性在RadioButton的頂部繪制一個(gè)圖形跨跨,這個(gè)圖形也會(huì)根據(jù)RadioButton的狀態(tài)的變化而變化
-->
<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時(shí)潮峦,設(shè)置其顏色為#00B7FA-->
<item android:state_checked="true" android:color="#00B7FA"/>
<!--RadioButton沒(méi)有被checked時(shí),設(shè)置其顏色為#818181-->
<item android:state_checked="false" android:color="#818181"/>
</selector>
res/drawable-hdip/bg_home.xml
<?xml version="1.0" encoding="utf-8"?>
<!--根據(jù)RadioButton是否被checked來(lái)設(shè)置其背景圖片-->
<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);
}
}