仿今日頭條的（一）

頭部用的是TabLayout和ViewPager實現的 底部用的是FragmentTabHost和Fragment實現的

先看底部的實現：

底部布局：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> <framelayout android:id="@+id/realtabcontent" android:layout_height="0dp" android:layout_weight="1" android:layout_width="match_parent"> <framelayout android:id="@android:id/tabcontent" android:layout_height="0dp" android:layout_weight="0" android:layout_width="0dp"> </framelayout> </framelayout>

其中item的實現布局：

Fragment02的布局和代碼:

package com.example.tablayouttest;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2016/8/23.
 */
public class Fragment02 extends Fragment {
    private View view;

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

        view = inflater.inflate(R.layout.tab02, container, false);
        return view;
    }

}


Fragment01裡承載的是頂部的TabLayout部分，會在下面粘貼

Fragment03和Fragment04的布局和代碼是一樣的，這裡就不再贅述。最後會有源碼。

其中圖片選擇器是這樣的：

其他三個選擇器類似，只是把圖片換了，這裡就不在重復粘貼了。

MainActivity.java

package com.example.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

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

public class MainActivity extends FragmentActivity {

    /**
     * 定義FragmentTabhost
     */
    private FragmentTabHost mtabhost;

    /**
     * 定義一個布局
     */
    private LayoutInflater minflater;
    /**
     * 定義數組存放Fragment
     */
    private Class[] mfragments = {Fragment01.class, Fragment02.class, Fragment03.class, Fragment04.class};

    /**
     * 定義數組存放按鈕
     */
    private int[] mimages = {R.drawable.image_tab01, R.drawable.image_tab02, R.drawable.image_tab03, R.drawable.image_tab04};

    /**
     * 定義Tab選項卡的文字
     */
    private String[] mtitle = {"首頁", "消息", "關注", "我的"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_tab);
        initView();
    }

    /**
     * 初始化組件
     */
    private void initView() {
        //實例化布局
        minflater = LayoutInflater.from(this);
        //實例化TabHost對象
        mtabhost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mtabhost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
        //得到Fragment的個數
        int count = mfragments.length;
        for (int i = 0; i < count; i++) {
            // 為每一個Tab按鈕設置圖標、文字和內容

            TabHost.TabSpec tabspec = mtabhost.newTabSpec(mtitle[i]).setIndicator(getTabItemView(i));
            //將tab按鈕添加到tab選項卡中
            mtabhost.addTab(tabspec, mfragments[i], null);
        }
    }

    /**
     * 給Tab按鈕設置圖標和文字
     */
    private View getTabItemView(int i) {
        View view = minflater.inflate(R.layout.tab_item, null);
        ImageView imageview = (ImageView) view.findViewById(R.id.tab_iv);
        imageview.setImageResource(mimages[i]);
        TextView textview = (TextView) view.findViewById(R.id.tab_tv);
        textview.setText(mtitle[i]);
        return view;
    }

}

再來看頂部的實現，這裡的Fragment01裡也就是首頁部分展示的頂部部分。

布局：

代碼：

package com.example.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
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 java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2016/8/23.
 */
public class Fragment01 extends Fragment {

    private String[] titles = new String[]{"推薦", "熱點", "視頻", "奧運會", "社會", "娛樂", "圖片", "科技", "汽車", "體育", "財經"};
    List list = new ArrayList<>();

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.activity_main, container, false);
        initView(view);
        return view;
    }

    public void initView(View view) {
        //初始化數據
        ViewPager viewPager;
        TabLayout tablayout;

        viewPager = (ViewPager) view.findViewById(R.id.viewPager);
        tablayout = (TabLayout) view.findViewById(R.id.tablayout);

        viewPager.setAdapter(new MyAdapter(getContext(), list, titles, getFragmentManager()));
        tablayout.setupWithViewPager(viewPager);
        tablayout.setTabTextColors(getResources().getColor(R.color.color_white), Color.WHITE);
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        for (int i = 0; i < titles.length; i++) {
            Fragment fragment = new MyFragment();
            Bundle bundle = new Bundle();
            bundle.putString("text", titles[i]);
            fragment.setArguments(bundle);
            list.add(fragment);
        }
    }
}

適配器的編寫：

package com.example.tablayouttest;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by Administrator on 2016/8/22.
 */
public class MyAdapter extends FragmentPagerAdapter {

    private Context context;//傳入上下文
    private List mlist;//將Fragment放入List集合中
    private String[] mtitles;//標題

    public MyAdapter(Context context, List mlist, String[] mtitles, FragmentManager fm) {
        super(fm);
        this.context = context;
        this.mlist = mlist;
        this.mtitles = mtitles;
    }

    @Override
    public Fragment getItem(int position) {
        return mlist.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mtitles[position];
    }
}

滑動切換時只有一個Fragment，而不是有多少個標題就有多少個Fragment。這裡只用一個Fragment承載所有的標題。

package com.example.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/8/22.
 */
public class MyFragment extends Fragment {
    private String mText;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mText = getArguments().getString("text");
        }
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(-1, -1);
        textView.setLayoutParams(params);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        textView.setText(mText);
        return textView;
    }
}

源碼地址：

這裡是源碼地址，還會繼續更新