Android之仿美团TabLayout的简单使用

一：先来两张效果图：

----------------demo的效果从下列图的打折优惠点击进去、

二：实现步骤：

1.在build.gradle文件下加入下面这句代码并引用它、

compile 'com.android.support:design:23.3.0'

2.主框架的xml布局实现、

<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">
    <!-- 标题栏 -->
    <include layout="@layout/title_layout" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_FindFragment_title"
        android:layout_width="match_parent"
        android:layout_height="49dp"
        android:background="#ffffff"
        app:tabIndicatorColor="#0093ea"
        app:tabSelectedTextColor="#0093ea"
        app:tabTextColor="#262626" />


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

</LinearLayout>

3.主框架的导航栏布局xml实现、

<?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="48dp"
    android:background="#0093ea">


    <ImageView
        android:id="@+id/fanhui"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="5dp"
        android:src="@mipmap/chaoshi_nav_fanhui_white_icon" />

    <TextView
        android:id="@+id/title_dh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#ffffff"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/textls"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="12dp"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:visibility="gone" />

</RelativeLayout>

4.主框架的activity实现，我这是继承的fragmentActivity，代码都有注释我就不用解释太多了、

 

package cll.com.myapplication;

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.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.LinkedList;
import java.util.List;

/**
 * Created by Administrator on 2017/4/25.
 * TabLayout主框架
 */
public class Alreadycreated extends FragmentActivity implements View.OnClickListener {

    private ViewPager viewpager;
    private ImageView fanhui;//返回键
    private TextView title_dh;//title

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.alreadycreated_layout);
        initlayout();
        inlayout();
    }

    /**
     * 实例化
     */
    private void initlayout() {
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        fanhui = (ImageView) findViewById(R.id.fanhui);
        title_dh = (TextView) findViewById(R.id.title_dh);
        title_dh.setText("已创建");
        fanhui.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            //返回键
            case R.id.fanhui:
                finish();
                break;
        }
    }

    /**
     * 动态创建adapter
     */
    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> mFragments = new LinkedList<>();
        private List<String> mTitles = new LinkedList<>();

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mTitles.add(title);

        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles.get(position);
        }

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


    }

    /**
     * 添加需要的界面
     */
    private void inlayout() {
        final MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(this.getSupportFragmentManager());
        adapter.addFragment(new AuditFragment().newInstance(), "审核中");
        adapter.addFragment(new HaveInHandFragment().newInstance(), "进行中");
        adapter.addFragment(new AlreadyOverFragment().newInstance(), "已结束");
        viewpager.setAdapter(adapter);
        //表示默认第二个界面
        viewpager.setCurrentItem(1);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_FindFragment_title);
        tabLayout.setupWithViewPager(viewpager);
    }
}

 

 

-------------------就这么多了，不喜勿喷、

-------------------最后附上源码：http://download.csdn.net/download/android_cll/9824720