android实现导航栏
android实现底部导航
首先创建mainActivity，先看页面上的排版数据：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" //竖直定位 tools:context="com.controller.mx.MainActivity"> <FrameLayout android:id="@+id/content" //页面内容展示模块 android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> <!--四个切换按钮--> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="@drawable/tab_bg"> //按钮背景图 <!--第一个切换按钮开始--> <RelativeLayout android:id="@+id/message" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> //图片和文字竖直排列 <!--按钮图片--> <ImageView android:id="@+id/message_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/message_unselected"/> //默认都是未选中的图片 <TextView android:id="@+id/message_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="消息" android:textColor="#4f8bda"/> </LinearLayout> </RelativeLayout> <!--第一个切换按钮结束--> <!--第二个切换按钮开始--> <RelativeLayout android:id="@+id/friends" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <!--按钮图片--> <ImageView android:id="@+id/friend_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/contacts_unselected"/> <TextView android:id="@+id/friend_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="好友" android:textColor="#4f8bda"/> </LinearLayout> </RelativeLayout> <!--第二个切换按钮结束--> <RelativeLayout android:id="@+id/dynamic" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/dynamic_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/news_unselected"/> <TextView android:id="@+id/dynamic_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="动态" android:textColor="#4f8bda"/> </LinearLayout> </RelativeLayout> </LinearLayout> </LinearLayout>然后创建三个切换页面,页面基本都一样，下面是activity_message.xml 其他的activity_dynamic.xml和activity_friend.xml都一样不同的地方我已经标注了
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/message_selected"/> //被选中时候选择的图片 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="消息" android:textSize="10dp" /> </LinearLayout> </RelativeLayout>
线面，看看后台主要是MainActivity
package com.controller.mx; import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends Activity implements OnClickListener { /**展示消息*/ private MessageActivity messageActivity; //引入自己创建的各个fragment组件，就是切换页面的后台activity /**好友*/ private FriendActivity friendActivity; /**d动态*/ private DynamicActivity dynamicActivity; /**消息布局*/ private View activity_message; /**好友布局*/ private View activity_friend; /**动态**/ private View activity_dynamic; /**消息控件**/ private ImageView messageImage; /***好友控件*/ private ImageView friendImage; /**动态控件**/ private ImageView dynamicIimage; /**消息标题控件**/ private TextView messageText; /**好友主题控件**/ private TextView friendText; /**冬天标题控件**/ private TextView dynamicText; /***管理FragmentManager**/ private FragmentManager fragmentManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); /**初始化页面布局*/ initViews(); fragmentManager=getFragmentManager(); //第一次启动第一个tab setTabSelected(0); } private void initViews(){ /**布局按钮*/ activity_message=findViewById(R.id.message); activity_friend=findViewById(R.id.friends); activity_dynamic=findViewById(R.id.dynamic); /**图片绑定*/ messageImage=(ImageView) findViewById(R.id.message_img); friendImage=(ImageView) findViewById(R.id.friend_img); dynamicIimage=(ImageView)findViewById(R.id.dynamic_img); /**textView**/ messageText=(TextView)findViewById(R.id.message_text); friendText=(TextView)findViewById(R.id.friend_text); dynamicText=(TextView)findViewById(R.id.friend_text); /**设置按钮监听**/ activity_message.setOnClickListener(this); activity_friend.setOnClickListener(this); activity_dynamic.setOnClickListener(this); }
//获取页面点击事件 @Override public void onClick(View v) { switch (v.getId()){ case R.id.message: //点击消息 setTabSelected(0);//执行选中操作，这里注意，自己定义的0，1，2要和case case R.id.message这些对应，setTabSelected（）方法中也是对应做出判断 break; case R.id.friends: //点击消息 setTabSelected(1); break; case R.id.dynamic: //点击消息 setTabSelected(2); break; default: break; } } private void setTabSelected(int index){ //清楚上次选中 clearSelection(); //开启Fragment事物 FragmentTransaction transaction=fragmentManager.beginTransaction(); //先隐藏所有Fragment hiddenFragment(transaction); switch (index){ case 0: messageImage.setImageResource(R.drawable.message_selected); messageText.setTextColor(Color.WHITE); if(messageActivity==null){ // 如果MessageFragment为空，则创建一个并添加到界面上 messageActivity=new MessageActivity(); transaction.add(R.id.content,messageActivity); }else{ // 如果MessageFragment不为空，则直接将它显示出来 transaction.show(messageActivity); } break; case 1: friendImage.setImageResource(R.drawable.contacts_selected); friendText.setTextColor(Color.WHITE); if(friendActivity==null){ // 如果MessageFragment为空，则创建一个并添加到界面上 friendActivity=new FriendActivity(); transaction.add(R.id.content,friendActivity); }else{ // 如果MessageFragment不为空，则直接将它显示出来 transaction.show(friendActivity); } break; case 2: default: dynamicIimage.setImageResource(R.drawable.news_selected); dynamicText.setTextColor(Color.WHITE); if(dynamicActivity==null){ // 如果MessageFragment为空，则创建一个并添加到界面上 dynamicActivity=new DynamicActivity(); transaction.add(R.id.content,dynamicActivity); }else{ // 如果MessageFragment不为空，则直接将它显示出来 transaction.show(dynamicActivity); } break; } transaction.commit(); } /**清楚所有选中状态 感觉有点像css吧*/ private void clearSelection(){ messageImage.setImageResource(R.drawable.message_unselected); messageText.setTextColor(Color.parseColor("#82858b")); friendImage.setImageResource(R.drawable.contacts_unselected); friendText.setTextColor(Color.parseColor("#82858b")); dynamicIimage.setImageResource(R.drawable.news_unselected); dynamicText.setTextColor(Color.parseColor("#82858b")); } /**隐藏所有fragment * @param transaction * **/ private void hiddenFragment(FragmentTransaction transaction){ if(messageActivity!=null){ transaction.hide(messageActivity); } if(friendActivity!=null){ transaction.hide(friendActivity); } if(dynamicActivity!=null){ transaction.hide(dynamicActivity); } } }
下面就是其他几个切换界面的activity,主要继承于Fragment，注意包的引入
都是一样，不同就是id的选择，这里已经用红线标注
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MessageActivity extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View contactsLayout = inflater.inflate(R.layout.activity_message, container, false); return contactsLayout; } }引入的图片
引入的图片，大家可以看看菜鸟教程