写点什么

Android UI—仿微信底部导航栏布局,android 应用程序开发

用户头像
Android架构
关注
发布于: 44 分钟前

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学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


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();


}

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android UI—仿微信底部导航栏布局,android应用程序开发