Android實現橫向滑動卡片效果

這篇文章主要爲大家詳細介紹了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);
  }
}
 
}

至此，效果就可以實現了，上手試試吧。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。