Android实现横向滑动卡片效果

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

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

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Android仿探探卡片式滑动效果实现
• Android自定义View仿探探卡片滑动效果