Fragment实现Tab

转载请注明出处amoscxy的博客:https://mp.csdn.net/mdeditor/80155970

转载请注明出处amoscxy的博客:https://mp.csdn.net/mdeditor/80155970

Fragment实现Tab

1.1 效果

这里写图片描述
只使用Fragment无法滑动界面

1.2 目录

这里写图片描述

1.3 素材

  • bottom_bar9.png
    这里写图片描述
    • tab_address_normal.png
      这里写图片描述
    • tab_address_pressed.png
      这里写图片描述
    • tab_bg2.png
      这里写图片描述
    • tab_find_frd_normal.png
      这里写图片描述
    • tab_find_frd_pressed.png
      这里写图片描述
    • tab_settings_normal.png
      这里写图片描述
    • tab_settings_pressed.png
      这里写图片描述
    • tab_weixin_normal.png
      这里写图片描述
    • tab_weixin_pressed.png
      这里写图片描述
    • title_bar9.png
      这里写图片描述

1.4 顶部提示栏top.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="45dp"
    android:background="@drawable/title_bar9"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>
  • 视图:
    这里写图片描述

1.5 底部标签bottom.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="55dp"
    android:background="@drawable/bottom_bar9"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>
  • 视图:
    这里写图片描述

1.6 activity_main.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" >

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <include layout="@layout/bottom" />

</LinearLayout>
  • 视图:
    这里写图片描述

1.7 四个切换界面

1.7.1 tab01.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_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示:
    这里写图片描述

1.7.2 tab02.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_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示:
    这里写图片描述

1.7.3 tab03.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_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示:
    这里写图片描述

1.7.4 tab04.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_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示:
    这里写图片描述

1.8 四个自定义Fragment

1.8.1 WeixinFragment

public class WeixinFragment extends Fragment {


    public WeixinFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,container,false);
    }

}

1.8.2 FrdFragment

public class FrdFragment extends Fragment {


    public FrdFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab02,container,false);
    }

}

1.8.3 AddressFragment

public class AddressFragment extends Fragment {


    public AddressFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab03,container,false);
    }

}

1.8.4 SettingFragment

public class SettingFragment extends Fragment {


    public SettingFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab04,container,false);
    }

}

1.9 MainActivity

package com.example.cxy.testtap;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener
{
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    private Fragment mTab01;
    private Fragment mTab02;
    private Fragment mTab03;
    private Fragment mTab04;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
        setSelect(0);
    }

    private void setSelect(int i) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                if(mTab01 == null){
                    mTab01 = new WeixinFragment();
                    transaction.add(R.id.id_content,mTab01);
                }else{
                    transaction.show(mTab01);
                }
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                if(mTab02 == null){
                    mTab02 = new FrdFragment();
                    transaction.add(R.id.id_content,mTab02);
                }else{
                    transaction.show(mTab02);
                }
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                if(mTab03 == null){
                    mTab03 = new AddressFragment();
                    transaction.add(R.id.id_content,mTab03);
                }else{
                    transaction.show(mTab03);
                }
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                if(mTab04 == null){
                    mTab04 = new SettingFragment();
                    transaction.add(R.id.id_content,mTab04);
                }else{
                    transaction.show(mTab04);
                }
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction) {
        if(mTab01 != null){
            transaction.hide(mTab01);
        }
        if(mTab02 != null){
            transaction.hide(mTab02);
        }
        if(mTab03 != null){
            transaction.hide(mTab03);
        }
        if(mTab04 != null){
            transaction.hide(mTab04);
        }
    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView()
    {
        // tabs
        mTabWeixin = findViewById(R.id.id_tab_weixin);
        mTabFrd = findViewById(R.id.id_tab_frd);
        mTabAddress = findViewById(R.id.id_tab_address);
        mTabSetting = findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = findViewById(R.id.id_tab_weixin_img);
        mFrdImg = findViewById(R.id.id_tab_frd_img);
        mAddressImg = findViewById(R.id.id_tab_address_img);
        mSettingImg = findViewById(R.id.id_tab_settings_img);
    }

    /**
     * 底部四个ImageButton都置为normal
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }
}
  • 源码解析:
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;

都要使用v4包中的Fragment

public class MainActivity extends FragmentActivity implements OnClickListener
{ }

必须继承FragmentActivity

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;

private Fragment mTab01;
private Fragment mTab02;
private Fragment mTab03;
private Fragment mTab04;

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
是底部四个tabs的LinearLayout布局

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
是底部的四个tabs布局中的ImageButton

private Fragment mTab01;
private Fragment mTab02;
private Fragment mTab03;
private Fragment mTab04;
是四个自定义Fragment

private void initView()
{
    // tabs
    mTabWeixin = findViewById(R.id.id_tab_weixin);
    mTabFrd = findViewById(R.id.id_tab_frd);
    mTabAddress = findViewById(R.id.id_tab_address);
    mTabSetting = findViewById(R.id.id_tab_settings);
    // ImageButton
    mWeixinImg = findViewById(R.id.id_tab_weixin_img);
    mFrdImg = findViewById(R.id.id_tab_frd_img);
    mAddressImg = findViewById(R.id.id_tab_address_img);
    mSettingImg = findViewById(R.id.id_tab_settings_img);
}

初始化控件

private void initEvents()
{
    mTabWeixin.setOnClickListener(this);
    mTabFrd.setOnClickListener(this);
    mTabAddress.setOnClickListener(this);
    mTabSetting.setOnClickListener(this);
}

设置点击监听事件

private void setSelect(int i) {
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            if(mTab01 == null){
                mTab01 = new WeixinFragment();
                transaction.add(R.id.id_content,mTab01);
            }else{
                transaction.show(mTab01);
            }
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            if(mTab02 == null){
                mTab02 = new FrdFragment();
                transaction.add(R.id.id_content,mTab02);
            }else{
                transaction.show(mTab02);
            }
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            if(mTab03 == null){
                mTab03 = new AddressFragment();
                transaction.add(R.id.id_content,mTab03);
            }else{
                transaction.show(mTab03);
            }
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            if(mTab04 == null){
                mTab04 = new SettingFragment();
                transaction.add(R.id.id_content,mTab04);
            }else{
                transaction.show(mTab04);
            }
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
    }
    transaction.commit();
}

点击底部的四个LinearLayout组件后四个自定义Fragment会跟随变化

private void resetImg()
{
    mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
    mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
    mAddressImg.setImageResource(R.drawable.tab_address_normal);
    mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}

底部四个ImageButton都置为normal状态

1.10 使用Fragment的好处

可以通过各自的Fragment来控制自己的布局和逻辑,不会是代码都冗余在activity里面,activity只作为一个调度器,来显示和隐藏对应的Fragment,这样便于后期的维护和复用

转载请注明出处amoscxy的博客:https://mp.csdn.net/mdeditor/80155970

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值