一.主要步骤:
1.创建工程项目，建立四个Fragment.java文件（如 weixin_Fragment.java）
2.建立四个tab.xml文件（如：tab01.xml）
3.创建top.xml文件（用于显示界面标题），bottom.xml文件（用于显示界面底下的四个ImageButton及对应textView）
4.完成activity_main.xml布局 （中间部分用FrameLayout）
5.对需要的亮和暗色图片放入drawable中
二.代码实现：
1.Fragment.java文件格式：
如：
public class Weixin_Fragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01,container,false);
}
2.tab.xml 代码格式：
如：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="This is Weixin Tab"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
（这里只是作为识别界面用所以比较简单，平常用可以进行扩展）
3.标题栏 top.xml格式：
如：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#464646"
android:gravity="center"
android:layout_height="55dp">
<TextView
android:gravity="center"
android:text="微信"
android:textSize="20sp"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
4.底部按钮布局：bottom.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#ffffff"
android:layout_height="65dp">
<LinearLayout
android:id="@+id/tab_weixin"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent">
<ImageButton
android:clickable="false"
android:id="@+id/tab_weixin_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/weixin_anse"
android:background="#0000"
/>
<TextView
android:text="微信"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_friend"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent">
<!--当点击图片按钮没有作用时可设置： android:clickable="false" 图片不可点击即让LinearLayout 去实现点击事件-->
<ImageButton
android:clickable="false"
android:id="@+id/tab_friend_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/friend_anse"
android:background="#00000000"
/>
<!--android:background="#00000000" 设置为透明 和四个0效果一样-->
<TextView
android:text="朋友"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_address"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent">
<ImageButton
android:clickable="false"
android:id="@+id/tab_address_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/zhibo_anse"
android:background="#00000000" //八个0和四个0均表示透明
/>
<TextView
android:text="直播"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_setting"
android:layout_width="0dp" //宽度方向平分空间最好设为0dp
android:orientation="vertical"
android:layout_weight="1" //分享剩余空间
android:gravity="center"
android:layout_height="match_parent">
<ImageButton
android:clickable="false"
android:id="@+id/tab_setting_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/shezhi_anse"
android:background="#00000000"
/>
<TextView
android:text="设置"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp" />
</LinearLayout>
</LinearLayout>
5.对主界面布局：
<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">
<include layout="@layout/top"/> //引入布局
<!--与ViewPager实现Tab不同的是这里不用ViewPager-->
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
></FrameLayout>
<include layout="@layout/bottom"/> //引入布局
6.MianActivity.java
//使用 v4 包下的 Fragment事务 需要改为继承FragmentActivity
public class MainActivity extends FragmentActivity implements View.OnClickListener{
private LinearLayout mTabWeixin;
private LinearLayout mTabFriend;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgaddress;
private ImageButton mImgSetting;
private Fragment weixinFragnment; //import android.support.v4.app.Fragment; 使用的包一定要一致
private Fragment friendFragnment;
private Fragment addressFragnment;
private Fragment settingFragnment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//设置无标题
setContentView(R.layout.activity_main);
initView();//初始化控件
initEvent();//初始化事件
setSelect(0);//对事物方法调用显示第一个界面
}
private void initEvent() {
//先给每一个layout设置点击监听 是LinearLayout
mTabWeixin.setOnClickListener(this);
mTabFriend.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
private void initView() {
mTabWeixin= (LinearLayout) findViewById(R.id.tab_weixin);
mTabFriend= (LinearLayout) findViewById(R.id.tab_friend);
mTabAddress= (LinearLayout) findViewById(R.id.tab_address);
mTabSetting= (LinearLayout) findViewById(R.id.tab_setting);
mImgWeixin= (ImageButton) findViewById( R.id.tab_weixin_img);
mImgFrd= (ImageButton) findViewById(R.id.tab_friend_img);
mImgaddress= (ImageButton) findViewById(R.id.tab_address_img);
mImgSetting= (ImageButton) findViewById(R.id.tab_setting_img);
}
//自定义一个方法
private void setSelect(int i){
// FragmentManager fm = getFragmentManager(); //先拿到管理器
FragmentManager fm = getSupportFragmentManager(); //使用V4包下的Fragment是的事务管理器
FragmentTransaction transaction = fm.beginTransaction(); //开启一个事务transaction
hideFragment(transaction); //自定义一个函数先对所有事务进行隐藏
//将图片切换为亮色
//切换界面
switch (i){ //切换图片为亮色
case 0:
{
if(weixinFragnment==null){
//为空则初始化他
weixinFragnment=new Weixin_Fragment();
transaction.add(R.id.id_content,weixinFragnment); //初始化Fragment
}else{
//否则对其进行显示
transaction.show(weixinFragnment);
}
mImgWeixin.setImageResource(R.drawable.weixin_lang); //切换图片
break;
}
case 1:
{
if(friendFragnment==null){
//为空则初始化他
friendFragnment=new Friend_Fragment();
transaction.add(R.id.id_content,friendFragnment); //初始化Fragment
}else{
//否则对其进行显示
transaction.show(friendFragnment);
}
mImgFrd.setImageResource(R.drawable.friend_liang);
break;
}
case 2:
{
if(addressFragnment==null){
//为空则初始化他
addressFragnment=new Address_Fragment();
transaction.add(R.id.id_content,addressFragnment); //初始化Fragment
}else{
//否则对其进行显示
transaction.show(addressFragnment);
}
mImgaddress.setImageResource(R.drawable.zhibo_liang);
break;
}
case 3:
{
if(settingFragnment==null){
//为空则初始化他
settingFragnment=new Setting_Fragment();
transaction.add(R.id.id_content,settingFragnment); //初始化Fragment
}else{
//否则对其进行显示
transaction.show(settingFragnment);
}
mImgSetting.setImageResource(R.drawable.shezhi_liang);
break;
}
}//switch
transaction.commit();//提交事务
}//setSelect()
//隐藏事务方法
private void hideFragment(FragmentTransaction transaction) { //对不为空的Fragment隐藏
if(weixinFragnment!=null){
transaction.hide(weixinFragnment);
}
if(friendFragnment!=null){
transaction.hide(friendFragnment);
}
if(addressFragnment!=null){
transaction.hide(addressFragnment);
}
if(settingFragnment!=null){
transaction.hide(settingFragnment);
}
} //hideFragment（）
@Override
public void onClick(View view) {
resetImg();//设置暗色
switch (view.getId()){
case R.id.tab_weixin:
{
setSelect(0);
mImgWeixin.setImageResource(R.drawable.weixin_lang); //将点击的图标设置为亮色
break;
}
case R.id.tab_friend:
{
setSelect(1);
mImgFrd.setImageResource(R.drawable.friend_liang);
break;
}
case R.id.tab_address:
{
setSelect(2);
mImgaddress.setImageResource(R.drawable.zhibo_liang);
break;
}
case R.id.tab_setting:
{
setSelect(3);
mImgSetting.setImageResource(R.drawable.shezhi_liang);
break;
}
}
}//onClick
//图片设置为暗色
private void resetImg() {
mImgWeixin.setImageResource(R.drawable.weixin_anse);
mImgFrd.setImageResource(R.drawable.friend_anse);
mImgaddress.setImageResource(R.drawable.zhibo_anse);
mImgSetting.setImageResource(R.drawable.shezhi_anse);
}
}
上
