用到的图片资源下载地址http://pan.baidu.com/s/1geqo6iB 密码:fuv0
ColorStateList
可以根据View
的状态来设置View
的颜色,例如背景色,文字颜色等等。用xml定义ColorStateList
时,要定义在res/color
文件夹中。例如,我们在res/color
下写了一个bg_edit.xml
。如下所示:
然后我们设置具有输入事件的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);
}
}
网友评论