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

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

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