Android實現橫向滑動卡片效果

發布時間：2020-09-04 22:51:17

來源：腳本之家

閱讀：255

作者：itbobby

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

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

主布局文件：activity_show_industry_list.xml，主要就是一個activity上放個viewpager，但是相對布局是關鍵

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:titleText="搜索框預留位置"

app:showBackButton="true"

android:id="@+id/titleView" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipChildren="false"

android:layerType="software"

android:id="@+id/awq_rl_vpc">

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

fragment布局文件：fragment_show_industry_list.xml ?該布局對應的類比較簡單，就不往上貼了

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

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="300dp" >

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

android:layout_width="match_parent"

android:layout_height="35dp"

android:layout_gravity="bottom"

android:alpha="0.5"

android:background="#333" />

android:layout_width="wrap_content"

android:layout_height="35dp"

android:layout_gravity="center_horizontal|bottom"

android:id="@+id/frameLayout" >

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent" >

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

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

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

主布局類ShowIndustryListActivity.java

public class ShowIndustryListActivity extends BaseActivity {

private FragmentPagerAdapter pagerada;

private ShowIndustryListFragment showIndustryListFragment;

ShowIndustryListFragment fragment1,fragment2,fragment3,fragment4;

ArrayList 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();

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

public MyFragmentPagerAdapter(FragmentManager fm, ArrayList 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横向滚动卡片,Android实现横向滑动卡片效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。