本篇文章要实现的功能是在界面的底部放置一个FragmentTabHost实现类似QQ底部切换栏的功能,切换的内容用Fragment填充,然后再Fragment的里面再放入TabLayout和ViewPager,实现滑动切换的效果。
这里只需要一个Activity,我就放在MainActivity里面,直接上布局代码
<LinearLayout
android:orientation="vertical"
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:background="#e9e7ef"
android:layout_width="match_parent"
android:layout_height="50dp">
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
这里我只粘贴了局部代码,前面的那个LinearLayout是作为存放Fragment的容器
然后是MainActivity的代码(详细的功能实现就看注释吧)
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
import demo.yang.com.baisi.Essence.View.Essence_Fragment;
import demo.yang.com.baisi.PersonalCenter.View.PersonalCenter_Fragment;
import demo.yang.com.baisi.Posts.View.Posts_Fragment;
import demo.yang.com.baisi.R;
import demo.yang.com.baisi.Release.View.Release_Fragment;
import demo.yang.com.baisi.Shopping.View.Shopping_Fragment;
public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener,View.OnClickListener {
private LayoutInflater layoutInflater;
private FragmentTabHost fragmentTabHost;
//存放Fragment的界面
private Class fragmentArray[] = {Essence_Fragment.class, Posts_Fragment.class, Release_Fragment.class, Shopping_Fragment.class, PersonalCenter_Fragment.class};
//Tab选项卡的文字
private String mTabTextArray[] = {"aa","bb","cc","dd","ee"};
//tab选项卡的图标id
private int mTabImageResIDArray[] = {R.drawable.square_frament_item_imagebackground,R.drawable.grabwork_fragment_item_imagebackground,R.drawable.yaoming,R.drawable.mywork_fragment_item_imagebackground,R.drawable.personnalcenter_fragment_item_imagebackground};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layoutInflater = LayoutInflater.from(this);
initView();
}
//初始化组件
public void initView(){
fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
fragmentTabHost.setup(MainActivity.this,getSupportFragmentManager(),R.id.realtabcontent);
int count = fragmentArray.length;
fragmentTabHost.getTabWidget().setDividerDrawable(null);
for (int i = 0;i<count;i++){
//为每一个Tab按钮设置图标、文字和内容
TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(mTabTextArray[i]).setIndicator(getTabItemView(i));
//将Tab按钮添加进Tab选项卡中,并绑定对应碎片
fragmentTabHost.addTab(tabSpec,fragmentArray[i],null);
}
//碎片tab切换监听
fragmentTabHost.setOnTabChangedListener(this);
}
//给TabItem设置图标和文字
private View getTabItemView(int index){
View itemView;
TextView itemTextView;
ImageView itemImageView;
itemView = layoutInflater.inflate(R.layout.fragmenthost_tab_item,null);
itemImageView = (ImageView) itemView.findViewById(R.id.fragmentHost_tab_item_imageView);
itemTextView = (TextView) itemView.findViewById(R.id.fragmentHost_tab_item_textView);
itemImageView.setImageResource(mTabImageResIDArray[index]);
itemTextView.setText(mTabTextArray[index]);
if (index == 2){//这里是项目需求,设置成了只显示图标
itemTextView.setVisibility(View.GONE);
}
return itemView;
}
@Override
public void onClick(View view) {
}
@Override
public void onTabChanged(String s) {
}
}
接着来看底部切换的碎片的布局代码,里面放入了TabLayout和ViewPager
<android.support.design.widget.TabLayout
android:id="@+id/essence_top_tablayout"
android:background="@color/colorAccent"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/darker_gray"
app:tabIndicatorColor="#f4f7fe"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/essence_top_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
然后还是直接上碎片的代码
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import demo.yang.com.baisi.Essence.Adapter.EssencePagerAdapter;
import demo.yang.com.baisi.R;
public class Essence_Fragment extends Fragment {
private TabLayout tabLayout;
private ViewPager viewPager;
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
private String mParam1;
private String mParam2;
public Essence_Fragment() {
// Required empty public constructor
}
public static Essence_Fragment newInstance(String param1, String param2) {
Essence_Fragment fragment = new Essence_Fragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_essence, container, false);
viewPager = (ViewPager) view.findViewById(R.id.essence_top_viewpager);
tabLayout = (TabLayout) view.findViewById(R.id.essence_top_tablayout);
EssencePagerAdapter essencePagerAdapter = new EssencePagerAdapter(getChildFragmentManager());
essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("shehui"),"社会");
essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("meinv"),"美女");
essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("lengzhishi"),"冷知识");
essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("youxi"),"游戏");
viewPager.setAdapter(essencePagerAdapter);
tabLayout.setupWithViewPager(viewPager);
return view;
}
}
这里主要是看OnCreateView里面的代码,首先通过inflater.inflate的方法获取view,然后对TabLayout已经ViewPager进行初始化,然后new一个ViewPager的适配器(稍后给代码),通过适配器添加tab和设置tab的标题,最后通过TabLayout的setupWithViewPager方法将TabLayout与ViewPager绑定在一起
下面是ViewPager的适配器的代码
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class EssencePagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragment = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
public EssencePagerAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment,String string){
mFragment.add(fragment);
mFragmentTitles.add(string);
}
@Override
public Fragment getItem(int position) {
return mFragment.get(position);
}
@Override
public int getCount() {
return mFragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
这里的ViewPager还是使用Fragment来填充,下面是填充ViewPager的Fragment
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import demo.yang.com.baisi.R;
public class Essence_content_Fragment extends Fragment {
private static final String ARG_PARAM1 = "param1";
private String mParam1;
public Essence_content_Fragment() {
// Required empty public constructor
}
public static Essence_content_Fragment newInstance(String param1) {
Essence_content_Fragment fragment = new Essence_content_Fragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_essence_content, container, false);
}
}
他的布局文件可以先随便放一个TextView用于展现功能,这里就不粘代码了。
通过以上的代码,就实现了我们需要的功能,其他具体的优化就请有心人继续深究了,如果我这里写得有什么不足的地方,欢迎大家指出。