Android实现横向滑动卡片效果

 更新时间:2020年04月08日 16:27:12   作者:itbobby  
这篇文章主要为大家详细介绍了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中DrawerLayout+ViewPager滑动冲突的解决方法

    Android中DrawerLayout+ViewPager滑动冲突的解决方法

    这篇文章主要为大家详细介绍了Android中DrawerLayout+ViewPager滑动冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Android使用Canvas对象实现刮刮乐效果

    Android使用Canvas对象实现刮刮乐效果

    这篇文章主要介绍了Android使用Canvas对象实现刮刮乐效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • Android控件之使用ListView实现时间轴效果

    Android控件之使用ListView实现时间轴效果

    这篇文章主要介绍了Android基础控件之使用ListView实现时间轴效果的相关资料,本文是以查看物流信息为例,给大家介绍了listview时间轴的实现代码,需要的朋友可以参考下
    2016-11-11
  • 解析Android开发优化之:对界面UI的优化详解(一)

    解析Android开发优化之:对界面UI的优化详解(一)

    在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开的。界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局
    2013-05-05
  • Android高德地图poi检索仿微信发送位置实例代码

    Android高德地图poi检索仿微信发送位置实例代码

    本篇文章主要介绍了Android高德地图poi检索仿微信发送位置实例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2017-04-04
  • Android编程实现EditText字数监听并显示的方法

    Android编程实现EditText字数监听并显示的方法

    这篇文章主要介绍了Android编程实现EditText字数监听并显示的方法,涉及Android EditText文本框事件监听与响应相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • Android中两个Activity之间数据传递及返回问题

    Android中两个Activity之间数据传递及返回问题

    本篇文章主要介绍了Android中两个Activity之间数据传递及返回问题,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • Kotlin语言使用BroadcastReceiver示例介绍

    Kotlin语言使用BroadcastReceiver示例介绍

    Android开发的四大组件分别是:活动(activity),用于表现功能;服务(service),后台运行服务,不提供界面呈现;广播接受者(Broadcast Receive),勇于接收广播;内容提供者(Content Provider),支持多个应用中存储和读取数据,相当于数据库,本篇着重介绍广播组件
    2022-09-09
  • 详解android项目由Gradle 2.2 切换到 3.0的坑

    详解android项目由Gradle 2.2 切换到 3.0的坑

    本篇文章主要介绍了详解android项目由Gradle 2.2 切换到 3.0的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 使用Android studio3.6的java api方式调用opencv

    使用Android studio3.6的java api方式调用opencv

    这篇文章主要介绍了Android studio3.6的java api方式调用opencv的代码详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03

最新评论