项目框架搭建 FrameLayout+RadioGroup+TableLayout+ 实现复杂界面布局

FrameLayout+RadioGroup+TabLayout+viewpager 实现复杂界面布局

一  前言

viewpager+fragment 的不足

在之前的项目中所采用的是viewpager+fragment 的方式进行的框架搭建实现点击按钮切换不同的页面，不足之处就在于 在某种特殊的场景布局中就显得力不从心，尤其像新闻资讯的首页，以及淘宝购物的首页等，都属于复杂布局，若是采用之前的方式，viewpager里面嵌套viewpager 会发生组件之间冲突的问题，不利于后期的维护

FrameLayout+RadioGrup 布局

   采用这种布局就可以避免上面的问题发生，可以只用一个FrameLayout就可以嵌套多个Fragment而且互不影响，通过Fragment的切换方法就可以切到不同的Fragment,在面对大型的复杂页面布局就可以很好的处理好组件之间的关系  

二 框架搭建准备工作

涉及知识点

   Fragment事务，第三方tablayout库  ，tablayout+viewpager联动，FrameLayout+RadioGroup联动

导入依赖

implementation 'com.android.support:design:27.0.2'

三  框架搭建详细步骤

     1布局搭建

   activity_main.xml

    

 <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

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

        <RadioGroup
            android:id="@+id/group"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:background="@android:color/darker_gray"

            >
            <RadioButton
                android:id="@+id/btn1"
                android:layout_width="0dp"
                android:checked="true"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:padding="10sp"
                android:textColor="@drawable/fontcolor"
                android:gravity="center"
                android:drawableTop="@drawable/home1"
                android:text="首页"
                />
            <RadioButton
                android:id="@+id/btn2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:textColor="@drawable/fontcolor"
                android:gravity="center"
                android:padding="10sp"
                android:drawableTop="@drawable/govaffair1"
                android:text="排行榜"
                />
            <RadioButton
                android:id="@+id/btn3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:textColor="@drawable/fontcolor"
                android:gravity="center"
                android:padding="10sp"
                android:drawableTop="@drawable/newscenter1"
                android:text="微头条"
                />
            <RadioButton
                android:id="@+id/btn4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:padding="10sp"
                android:drawableTop="@drawable/smartservice1"
                android:textColor="@drawable/fontcolor"
                android:text="鲜图汇"
                />

        </RadioGroup>

    </LinearLayout>
</RelativeLayout>

 

背景选择器

<?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/holo_red_light"></item>
    <item android:state_checked="false" android:color="@android:color/black"></item>
    </selector>

2MainActivity

package com.bawei.newsapp;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import adapter.ContentAdapter;
import beans.ContentModel;

public class MainActivity extends AppCompatActivity {

    private FrameLayout mFrm;
    private RadioGroup mGroup;
    private ImageView leftMenu;
    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏，一定要在setContentView之前
        setContentView(R.layout.activity_main);
     
        fm = getSupportFragmentManager();   //通过事务来开启管理类
        initView();

        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.frm,new Fragment01());   //默认切换为首界面
        transaction.commit();

        mGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.btn1:
                        //动态添加Fragment
                        FragmentManager manager = getSupportFragmentManager();
                        FragmentTransaction transaction = manager.beginTransaction();
                        transaction.replace(R.id.frm,new Fragment01());
                        transaction.commit();

                        break;

                    case R.id.btn2:
                        //动态添加Fragment
                        FragmentManager manager2 = getSupportFragmentManager();
                        FragmentTransaction transaction2 = manager2.beginTransaction();
                        transaction2.replace(R.id.frm,new Fragment02());
                        transaction2.commit();

                        break;

                    case R.id.btn3:
                        //动态添加Fragment
                        FragmentManager manager3 = getSupportFragmentManager();
                        FragmentTransaction transaction3 = manager3.beginTransaction();
                        transaction3.replace(R.id.frm,new Fragment03());
                        transaction3.commit();

                        break;

                    case R.id.btn4:
                        //动态添加Fragment
                        FragmentManager manager4 = getSupportFragmentManager();
                        FragmentTransaction transaction4 = manager4.beginTransaction();
                        transaction4.replace(R.id.frm,new Fragment04());
                        transaction4.commit();

                        break;

                    default:
                        break;

                }



            }
        });


    }

    private void initView() {
        mFrm = (FrameLayout) findViewById(R.id.frm);
        mGroup = (RadioGroup) findViewById(R.id.group);
      
  

    }
   
}

3Fragment01 布局  (tablayout+viewpager联动)

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_red_dark"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/colorPrimaryDark"
    app:tabMinWidth="100dp"
    />


<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_below="@+id/tl"
    android:layout_width="match_parent"
     android:layout_height="match_parent"/>

</RelativeLayout>

4 Fragment01 主代码

package com.bawei.newsapp;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.Switch;
import android.widget.Toast;

import com.andy.library.ChannelActivity;
import com.andy.library.ChannelBean;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

import java.lang.reflect.Type;
import java.util.ArrayList;

/**
 * Created by admin on 2017/12/13.
 */

public class Fragment01 extends Fragment {

    private View view;
    private ViewPager mVp;
    private ArrayList<ChannelBean> channelBeens;
    private TabLayout mTl;
    private Gson gson;
    private FragmentManager fm;
    private ArrayList<Fragment> fragments;
    private ImageButton mImgbtn;
    private   Fragment_test fragment_test;
    private  Fragmenta fragmenta;
    private  Fragmentb fragmentb;
    private  Fragmentc fragmentc;
    private  Fragmentd fragmentd;
    private  Fragmente fragmente;
    private  Fragmentf fragmentf;
    private  Fragmentg fragmentg;





    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = View.inflate(getContext(), R.layout.fragment01_layout, null);

        initView(view);

        fm = getChildFragmentManager();   //得到孩子的Fragment的事务管理类

        channelBeens = new ArrayList<ChannelBean>();  //准备好给tablayout的集合数据

        //准备数据，添加集合   //准备栏目数据
        channelBeens.add(new ChannelBean("热点",true));
        channelBeens.add(new ChannelBean("军事",true));
        channelBeens.add(new ChannelBean("八卦",true));
        channelBeens.add(new ChannelBean("游戏",true));
        channelBeens.add(new ChannelBean("宠物",true));
        channelBeens.add(new ChannelBean("汽车",true));
        channelBeens.add(new ChannelBean("热卖",true));
        channelBeens.add(new ChannelBean("外卖",true));

     //把选择的栏目（true）数据配置给tablayout
        for (int i = 0; i < channelBeens.size(); i++) {
            if (channelBeens.get(i).isSelect()){ //判断是否选中，若选中则添加
                mTl.addTab(mTl.newTab().setText(channelBeens.get(i).getName())); //给tablayout添加数据
            }


        }
        fragments = new ArrayList<Fragment>();
        fragment_test = new Fragment_test();
        fragmenta = new Fragmenta();
        fragmentb = new Fragmentb();
        fragmentc = new Fragmentc();
        fragmentd = new Fragmentd();
        fragmente= new Fragmente();
        fragmentf = new Fragmentf();
        fragmentg = new Fragmentg();

        //创建fragment作为vp的pager页
        fragments.add(fragment_test);//保存fragment，作为vp的pager页
        fragments.add(fragmenta);
        fragments.add(fragmentb);
        fragments.add(fragmentc);
        fragments.add(fragmentd);
        fragments.add(fragmente);
        fragments.add(fragmentf);
        fragments.add(fragmentg);

                Bundle b = new Bundle();
        b.putString("title1", channelBeens.get(0).getName());fragments.get(0).setArguments(b);
        b.putString("title2", channelBeens.get(1).getName());fragments.get(1).setArguments(b);
        b.putString("title3", channelBeens.get(2).getName());fragments.get(2).setArguments(b);
        b.putString("title4", channelBeens.get(3).getName());fragments.get(3).setArguments(b);
        b.putString("title5", channelBeens.get(4).getName());fragments.get(4).setArguments(b);
        b.putString("title6", channelBeens.get(5).getName());fragments.get(5).setArguments(b);
        b.putString("title7", channelBeens.get(6).getName());fragments.get(6).setArguments(b);
        b.putString("title8", channelBeens.get(7).getName());fragments.get(7).setArguments(b);






        mVp.setAdapter(new FragmentPagerAdapter(fm) {   //给viewpager添加适配器
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {  //给viewpager添加标题
                String name = channelBeens.get(position).getName();
                return name;
                        //channelBeens.get(position);
                        //ArrayList<ChannelBean>;
            }
        });

        mTl.setupWithViewPager(mVp);

        return view;
    }

    private void initView(View view) {
        mVp = (ViewPager) view.findViewById(R.id.vp);
        mTl = (TabLayout) view.findViewById(R.id.tl);
       

    }
}

在其他的Fragment中只需要写下面代码，接收bundle 就可以实现联动的效果

Bundle b = getArguments();
 title1 = b.getString("title1");

其他布局和组件自定义即可