仿今日头条的（一）

最新推荐文章于 2024-06-05 10:04:54 发布

luckyblues

最新推荐文章于 2024-06-05 10:04:54 发布

阅读量939

点赞数

分类专栏： Android学习

本文链接：https://blog.csdn.net/qq_27632117/article/details/52299285

版权

Android学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

头部用的是TabLayout和ViewPager实现的
底部用的是FragmentTabHost和Fragment实现的

这里写图片描述

先看底部的实现：

底部布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e0e6f6">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

其中item的实现布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#e0e6f6"
    android:gravity="center"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/tab_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:src="@drawable/image_tab01" />

    <TextView
        android:id="@+id/tab_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="首页"
        android:textSize="10sp" />

</LinearLayout>

Fragment02的布局和代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tab02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Tab02"
        android:textSize="20sp" />
</LinearLayout>

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的布局和代码是一样的，这里就不再赘述。最后会有源码。

其中图片选择器是这样的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/ic_drawer_appstore_pressed"  android:state_pressed="true" />

    <item android:drawable="@mipmap/ic_drawer_appstore_normal" />
</selector>

其他三个选择器类似，只是把图片换了，这里就不在重复粘贴了。

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里也就是首页部分展示的顶部部分。

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D33C3C"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabMode="scrollable">

        </android.support.design.widget.TabLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:layout_marginTop="5dp"
            android:src="@mipmap/ic_plus" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

</LinearLayout>

代码：

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<Fragment> 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<Fragment> mlist;//将Fragment放入List集合中
    private String[] mtitles;//标题

    public MyAdapter(Context context, List<Fragment> 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;
    }
}