Android UI—仿微信底部导航栏布局,android 应用程序开发
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tab_selector_weixing"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="微信"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_tongxunlu"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="通讯录"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbFind"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_faxian"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="发现"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbMe"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_wo"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="我"
android:textColor="@color/tab_selector_tv_color" />
</RadioGroup></LinearLayout>
看下新建的布局和资源文件:
其中 tab_selector_tv_color.xml 主要是用于控制切换的时候显示下面字体的颜色:
<?xml version=``"1.0"
encoding=``"utf-8"``?>
<selector xmlns:android=``"http://schemas.android.com/apk/res/android"``>
<item android:state_checked=``"true"
android:color=``"@android:color/white"``/>
<item android:state_checked=``"false"
android:color=``"@android:color/darker_gray"``/>
<item android:color=``"@android:color/darker_gray"``/>
</selector>
其中 tab_selector_checked_bg.xml 布局文件选中的时候每个 RadioButtton 的背景颜色:
<?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_bg_halo"``/>
</selector>
其中 tab_selector_weixing.xml 主要是点击的时候显示不同的图片,一个是绿色的,一个是白色:
<?xml version=``"1.0"
encoding=``"utf-8"``?>
<selector xmlns:android=``"http://schemas.android.com/apk/res/android"
>
<item android:state_checked=``"false"
android:drawable=``"@drawable/tab_weixin_normal"``></item>
<item android:state_checked=``"true"
android:drawable=``"@drawable/tab_weixin_pressed"``></item>
</selector>
其中需要切换的 chat.xml,address.xml,find.xml,me.xml 都是一样的,其中 chat.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:orientation=``"vertical"
>
<TextView
android:layout_height=``"wrap_content"
android:layout_width=``"wrap_content"
android:text=``"微信"
android:textSize=``"20sp"
/>
<TextView
android:layout_height=``"wrap_content"
android:layout_width=``"wrap_content"
android:text=``"http://www.cnblogs.com/xiaofeixiang"
android:textSize=``"15sp"
/>
</LinearLayout>
实现 Demo
MainActivity.java 中的代码,主要的就是设置一下 OnCheckedChangeListener,注意 MainActivity 中需要继承 FragmentActivity:
public
void
initView() {
chat = ``new
FragmentChat();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat).commit();
myTabRg = (RadioGroup) findViewById(R.id.tab_menu);
myTabRg.setOnCheckedChangeListener(``new
OnCheckedChangeListener() {
@Override
public
void
onCheckedChanged(RadioGroup group, ``int
checkedId) {
// TODO Auto-generated method stub
switch
(checkedId) {
case
R.id.rbChat:
chat = ``new
FragmentChat();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat)
.commit();
break``;
case
R.id.rbAddress:
if
(address==``null``) {
address =``new
FragmentAddress();
}
评论