Fragment实现微信Tab界面（不可通过界面左右拖动切换界面，只可以由按钮切换）

2022-06-26 05:12:36

一.主要步骤:

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

}

上

码农公寓

相关文章