Android FragmentTabHost轻松实现微博主界面(一)

一、概述

1. FragmentTabHost继承关系:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.FrameLayout
               ↳    android.widget.TabHost
                   ↳    android.support.v4.app.FragmentTabHost

可以看出是TabHost的一个子类;

2. FragmentTabHost实现效果:

这里写图片描述

如图所示,简单实现微博主界面的效果,也是目前市面上大多数app首页效果;

二、基本用法

  1. 导入v4支持包(AndroidStudio在项目对应Module的build.gradle下配置):
dependencies {
    compile 'com.android.support:support-v4:23.4.0'
}
  1. 在相应的布局xml文件中使用:
<android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/tab_height">

        </FrameLayout>

    </android.support.v4.app.FragmentTabHost>

注意点:

  • 这里可以看出FragmentTabHost中需要两个元素:TabWidget和tabcontent;
  • 并且FragmentTabHost的id必须设置为android:id/tabhost,TabWidget的id必须设置为:android:id/tabs,tabcontent的id必须设置为:android:id/tabcontent;
  • 在代码中初始化FragmentTabHost:
    这里我贴上我在Activity中初始化的代码,TabFragment中只有一个TextView通过传过去的参数设置内容:
private static final String[] TABS = {"HOME", "MESSAGE", "SEARCH", "PROFILE"};

@Override
protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ButterKnife.bind(this);

      initView();
}

private void initView() {
      mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
      mTabHost.getTabWidget().setVisibility(View.GONE);
      for (int i = 0; i < TABS.length; i++){
          Bundle args = new Bundle();
          args.putString(TabFragment.ARG_TEXT, TABS[i]);
       mTabHost.addTab(mTabHost.newTabSpec(TABS[i]).setIndicator(TABS[i]), TabFragment.class, args);
        }
    }

TabFragment代码如下:

public class TabFragment extends Fragment {

    public static final String ARG_TEXT = "arg_text";
    private String mText;

    private View mRootView;

    @BindView(R.id.text_show)
    TextView mTextView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (mRootView == null){
            mRootView = inflater.inflate(R.layout.fragment_tab_home, null);
            initView(mRootView);
        }
        return mRootView;
    }

    private void initView(View rootView) {
        ButterKnife.bind(this, rootView);
        mText = getArguments().getString(ARG_TEXT);
        mTextView.setText(mText);
    }
}

注意点:
- 在FragmentTabHost inflate完成之后必须要调用mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);设置关联;
- 由于FragmentTabHost的tab在顶部,这里就隐藏掉其tab,然后在xml中自行定制自己的tab,放置在页面底部;
- 在对应位置添加对应的tab和Fragment:

mTabHost.addTab(mTabHost.newTabSpec(TABS[i]).setIndicator(TABS[i]), TabFragment.class, args);
  • 为每个tab添加点击事件:
    这里很简单,只要根据你自己定义的底部tab设置点击监听即可:

    1. 根据点击位置改变自己定义的底部tab的UI变更
    2. 根据点击位置可以关联FragmentTabHost,接口很简单,设置如下:
@OnClick(R.id.tab_home)
public void onTabHomeClicked(View view){
     chooseTab(0);
}

@OnClick(R.id.tab_message)
public void onTabMessageClicked(View view){
     chooseTab(1);
}

@OnClick(R.id.tab_search)
public void onTabSearchClicked(View view){
     chooseTab(2);
}

@OnClick(R.id.tab_profile)
public void onTabProfileClicked(View view){
     chooseTab(3);
}

 private void chooseTab(int position){
        int oldTab = mTabHost.getCurrentTab();
        if (oldTab == position){
            return;
        }

        mTabHost.setCurrentTab(position);
        int selectColor = getResources().getColor(R.color.font_tab_bar_selected);
        int unSelectColor = getResources().getColor(R.color.font_tab_bar_unselected);

        mTabHomeImage.setImageResource(position == 0 ? R.drawable.tabbar_home_highlighted : R.drawable.tabbar_home);
        mTabHomeText.setTextColor(position == 0 ? selectColor : unSelectColor);
        mTabMessageImage.setImageResource(position == 1 ? R.drawable.tabbar_message_center_highlighted : R.drawable.tabbar_message_center);
        mTabMessageText.setTextColor(position == 1 ? selectColor : unSelectColor);
        mTabSearchImage.setImageResource(position == 2 ? R.drawable.tabbar_search_highlighted : R.drawable.tabbar_search);
        mTabSearchText.setTextColor(position == 2 ? selectColor : unSelectColor);
        mTabProfileImage.setImageResource(position == 3 ? R.drawable.tabbar_profile_highlighted : R.drawable.tabbar_profile);
        mTabProfileText.setTextColor(position == 3 ? selectColor : unSelectColor);
 }

三、总结

FragmentTabHost可以轻松实现tab与Fragment之间的关联,如果tab在上方可以直接使用TabWidget实现,如果tab在下方可以隐藏TabWidget,通过自定义的tab布局,然后为每个tab添加点击监听,用FragmentTabHost.setCurrentTab(int position)即可实现跳转,每个tab点击时候的ui变更可以自己配置。

下一篇会写出微博中间按钮弹出popupwindow的方法;

发布了82 篇原创文章 · 获赞 148 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览