安卓实现横向滑动的卡片效果

来源：互联网发布：淘宝虚拟物品类目违规编辑：程序博客网时间：2024/05/17 22:33

最近项目上需要实现这样效果的一个页面，本来想找个现成的两下搞定，但是问了半天度娘也没招，索性自己琢磨琢磨（这里边也少不了同事的帮助），先把最终的效果图贴上：

理论上讲，其本质并不复杂，就是一个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>

fragment布局文件：fragment_show_industry_list.xml 该布局对应的类比较简单，就不往上贴了

<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>

主布局类ShowIndustryListActivity.java

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);    }}}

至此，效果就可以实现了，上手试试吧。

1 2