最近项目上需要实现这样效果的一个页面,本来想找个现成的两下搞定,但是问了半天度娘也没招,索性自己琢磨琢磨(这里边也少不了同事的帮助),先把最终的效果图贴上:
理论上讲,其本质并不复杂,就是一个viewpager,但是第一次实现这样的效果还是要花些时间的,具体的代码如下:
主布局文件:activity_show_industry_list.xml,主要就是一个activity上放个viewpager,但是相对布局是关键
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<? 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 该布局对应的类比较简单,就不往上贴了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
< 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
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); } } } |
至此,效果就可以实现了,上手试试吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/u012193089/article/details/50849057