最近專案上需要實現這樣效果的一個頁面，本來想找個現成的兩下搞定，但是問了半天度娘也沒招，索性自己琢磨琢磨（這裡邊也少不了同事的幫助），先把最終的效果圖貼上：

理論上講，其本質並不複雜，就是一個viewpager，但是第一次實現這樣的效果還是要花些時間的，具體的程式碼如下：

主佈局檔案：activity_show_industry_list.xml，主要就是一個activity上放個viewpager，但是相對佈局是關鍵

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="@color/colorGrayBg">
    <huazheng.haiereng.views.TitleView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleText="搜尋框預留位置"
        app:showBackButton="true"
        android:id="@+id/titleView" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:layerType="software"
        android:id="@+id/awq_rl_vpc">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_show_industry_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clipChildren="false"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginBottom="90dp" />

    </RelativeLayout>
</LinearLayout>
 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="huazheng.haiereng.BlankFragment"
    android:orientation="vertical"
    android:background="@color/colorWhite">

    <!-- TODO: Update blank fragment layout -->

    <FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="300dp" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/iv_show_industry_list_pic"
            android:background="@mipmap/show_industry_detail"
            android:layout_gravity="center_horizontal" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_gravity="bottom"
            android:alpha="0.5"
            android:background="#333" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_gravity="center_horizontal|bottom"
            android:id="@+id/frameLayout" >

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="經濟型酒店分體空調解決方案"
                    android:textColor="@color/colorTextWhite"
                    android:layout_gravity="center"
                    android:id="@+id/tv_show_industry_list_title" />
            </LinearLayout>
        </FrameLayout>
    </FrameLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="廣泛應用於住宅地產、宿舍、教學樓、通訊基站等，為其打造舒適空氣解決方案"
        android:id="@+id/tv_show_industry_list_detail"
        android:layout_margin="20dp"
        android:textSize="@dimen/font_size_30"
        android:textColor="@color/colorTextGray" />

    <Button
        android:layout_width="120dp"
        android:layout_height="35dp"
        android:text="檢視詳情"
        android:id="@+id/bt_show_industry_list_cat"
        android:textColor="@color/colorTextWhite"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/drawable_circle_corner" />
</LinearLayout>
 

public class ShowIndustryListActivity extends BaseActivity {
    private FragmentPagerAdapter pagerada;
    private ShowIndustryListFragment showIndustryListFragment;
    ShowIndustryListFragment fragment1,fragment2,fragment3,fragment4;
    ArrayList<Fragment> fragments;
    @Bind(R.id.vp_show_industry_list)
    ViewPager viewPager;
    FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_industry_list);
        ButterKnife.bind(this);
        fragmentManager = getSupportFragmentManager();
        fragments= new ArrayList<Fragment>();
        fragment1 = new ShowIndustryListFragment();
        fragment2 = new ShowIndustryListFragment();
        fragment3 = new ShowIndustryListFragment();
        fragment4 = new ShowIndustryListFragment();
        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);

        viewPager.setOffscreenPageLimit(fragments.size());//卡片數量
        viewPager.setPageMargin(10);//兩個卡片之間的距離，單位dp

        if (viewPager!=null){
            viewPager.removeAllViews();
        }

        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);

        viewPager.setAdapter(myFragmentPagerAdapter);
    }

    class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private ArrayList<Fragment> listFragments;
    public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> al) {
        super(fm);
        listFragments = al;
    }

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

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

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

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }
}

}