ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(一)
来源:互联网 发布:sql server 百度网盘 编辑:程序博客网 时间:2024/05/01 19:18
效果图:
大体上就是这个样子,可能不太清楚 但是大家知道是什么效果就好啦~
(PS: 图中没有加高斯模糊图,后边 我会加上)
下面来分析一下这个布局
底层用一个ImageView 上层用一个定制的ViewPager然后用FramLayout来包裹
代码:
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_bg_pic" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/expert_list_bg_default"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false"> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal" android:text="求职路线计划" android:paddingTop="60dp" android:paddingBottom="45dp" android:textColor="#fff" android:textSize="18sp"/> <android.support.v4.view.ViewPager android:layout_below="@+id/tv_title" android:id="@+id/vp_pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="45dp" android:layout_marginRight="45dp" android:layout_marginBottom="30dp" android:clipChildren="false"/> </RelativeLayout></FrameLayout>
需要注意:
- 一屏显示多个ViewPager的子Item 主要是
android:clipChildren="false"
RelativeLayout和ViewPager都要设置否则没有效果。
关于这个问题详情见我另一篇博客
http://blog.csdn.net/codenoodles/article/details/50991793
那么下步就要写一下viewpager对应的item
先上代码:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@drawable/shape_bg_item"> <!-- 设置参照物 --> <View android:id="@+id/strut" android:layout_width="0dp" android:layout_height="0dp" android:layout_centerVertical="true"/> <com.upc.viewpagerGallery.View.RoundImageView android:id="@+id/iv_title_pic" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignBottom="@+id/strut" android:layout_alignParentTop="true" android:src="@drawable/expert_default" app:type="round"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:layout_alignTop="@+id/strut" android:layout_below="@+id/iv_title_pic" android:background="#fff" android:orientation="vertical" android:paddingTop="45dp"> <TextView android:id="@+id/tv_exper_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:ellipsize="end" android:paddingBottom="30dp" android:singleLine="true" android:text="Web前端工程师" android:textColor="@android:color/black" android:textSize="20sp" android:typeface="sans"/> <View android:id="@+id/v_line" android:layout_width="match_parent" android:layout_height="1dp" android:layout_below="@+id/tv_exper_name" android:background="#a000"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/v_line" android:layout_centerHorizontal="true" android:gravity="center" android:orientation="horizontal" android:paddingTop="60dp"> <TextView android:id="@+id/tv_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="388" android:textColor="#a000" android:textSize="12sp"/> <TextView android:id="@+id/tv_string" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="人学习" android:textColor="#a000" android:textSize="12sp"/> </LinearLayout> </RelativeLayout></RelativeLayout>
需要注意的几点:
首先一个ImageView和底部的RelativeLayout平分布局空间。不要问我为啥不直接用LinearLayout的layout_weight我在前面讲圆角布局的时候提到过,没看过的朋友可以先去看一下
http://blog.csdn.net/codenoodles/article/details/50990646
当然,咱们在item里也用到了圆角布局,还不会写的同学也可以先去上边的链接看一下。显示职业的TextView和底部的View横线左右对齐,我的处理方式是在activity中根据textView的width动态设置View横线的宽度,后边会讲到。
学习人数的textview和显示”人学习” 的TextView整体居中问题。我用的一个LinearLayout包裹一下。(不要问为啥不用一个TextView,因为实际项目中肯定是从服务器过去数据的)
Activity逻辑
package com.upc.viewpagerGallery.Activity;import android.annotation.TargetApi;import android.app.Activity;import android.os.Build;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.view.WindowManager;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import com.upc.viewpagerGallery.R;import java.util.LinkedList;/** * Created by Explorer on 2016/3/27. */public class ViewPagerGalleryActivity extends Activity { private ViewPager mViewPager; private ImageView ivBgPic; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { setTranslucentStatus(true); SystemBarTintManager tintManager = new SystemBarTintManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintResource(R.color.statusbar_color);//通知栏所需颜色 } setContentView(R.layout.main_activity); initViews(); } @TargetApi(19) private void setTranslucentStatus(boolean on) { Window win = getWindow(); WindowManager.LayoutParams winParams = win.getAttributes(); final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; if (on) { winParams.flags |= bits; } else { winParams.flags &= ~bits; } win.setAttributes(winParams); } private void initViews() { mViewPager = (ViewPager) findViewById(R.id.vp_pager); ivBgPic = (ImageView) findViewById(R.id.iv_bg_pic); mViewPager.setOffscreenPageLimit(3); mViewPager.setPageTransformer(true, new com.upc.viewpagerGallery.View.ZoomOutPageTransformer()); mViewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin)); MyViewPagerAdapter mAdapter = new MyViewPagerAdapter(); mViewPager.setAdapter(mAdapter); mViewPager.setOffscreenPageLimit(mAdapter.getCount()); } /** * Viewpager数据适配器 */ class MyViewPagerAdapter extends PagerAdapter { //view复用 private LinkedList<View> mViewCache = null; public MyViewPagerAdapter() { mViewCache = new LinkedList<>(); } @Override public int getCount() { return 6; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ViewHolder holder = null; View convertView = null; if (mViewCache.size() == 0) { convertView = View.inflate(ViewPagerGalleryActivity.this, R.layout.item_viewpager, null); holder = new ViewHolder(); holder.ivPic = (ImageView) convertView.findViewById(R.id.iv_title_pic); holder.tvName = (TextView) convertView.findViewById(R.id.tv_exper_name); holder.tvNum = (TextView) convertView.findViewById(R.id.tv_num); holder.vLine = convertView.findViewById(R.id.v_line); convertView.setTag(holder); } else { convertView = mViewCache.removeFirst(); holder = (ViewHolder) convertView.getTag(); } holder.ivPic.setImageResource(R.drawable.expert_default); holder.tvName.setText("Android工程师"); holder.tvNum.setText("39179"); /* 动态设置view 横线 让它和上方的文字等宽*/ holder.tvName.measure(0, 0);//要先measure一下,否则获得的宽度是0 int measuredWidth = holder.tvName.getMeasuredWidth(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(measuredWidth, 1); params.addRule(RelativeLayout.BELOW, R.id.tv_exper_name); params.addRule(RelativeLayout.CENTER_HORIZONTAL); holder.vLine.setLayoutParams(params); container.addView(convertView); return convertView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); mViewCache.add((View) object); } //View复用 public final class ViewHolder { public TextView tvName; public TextView tvNum; public ImageView ivPic; public View vLine; } }}
说明
用到了沉浸式状态栏,这里不再详细说明,有问题的可以看我另一篇讲沉浸状态栏的博文
http://blog.csdn.net/codenoodles/article/details/50636425处理前边说的TextView和View横线等宽的问题,动态设置View的宽度。(实际项目中文字长度肯定是不一样的,所以要这么做)
viewpage数据源。我这里写死了,大家用的话可以自己写数据源。
Adapter中用到了view复用,之后一篇博文我会专门讲。也很简单,大家应该一看就明白。viewpager的切换动画。详情见
http://blog.csdn.net/codenoodles/article/details/50991961
现在效果基本上和开始的效果图一样啦~~
先写到这里,之后我做一些调整,加上高斯模糊图再传demo 上来。
考虑了一下,还是先发一个Demo吧
http://download.csdn.net/detail/codenoodles/9473772
有问题的欢迎留言。推荐一下”Android开发经验交流群”(454430053),欢迎大家就加入
- ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(一)
- ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(二)
- 基于ViewPager实现Gallery画廊效果
- 利用ViewPager实现画廊Gallery效果
- ViewPager+TimerTask实现Gallery画廊效果
- ViewPager实现画廊效果
- ViewPager 实现画廊效果
- Android开发学习之基于ViewPager实现Gallery画廊效果
- Android开发学习之基于ViewPager实现Gallery画廊效果
- Android画廊效果-Gallery和ViewPager不同实现
- RecyclerView 实现gallery画廊效果
- RecyclerView 实现gallery画廊效果
- Android 使用ViewPager实现类似gallery画廊的效果(画廊效果之ViewPager显示多个图片)
- 【转】Android 使用ViewPager实现类似gallery画廊的效果(画廊效果之ViewPager显示多个图片)
- ViewPager实现Gallery效果
- Gallery实现ViewPager的页面切换效果、以及实现图片画廊效果
- Gallery画廊预览效果
- Gallery----自定义画廊效果
- BZOJ1029建筑抢修
- iOS开发学习笔记——表格1(UITableView)
- python读取目录下的所有文件和文件夹
- CodeForces - 618B Guess the Permutation (模拟)
- 在oracle中创建自动增长字段
- ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(一)
- Java中static修饰类的问题
- objective-c - 基础篇 - NSNumber与NSdate与NSExcetion
- 设计模式学习笔记——单例模式
- 实例变量和类变量的区别
- leetcode 每日一题 235. Lowest Common Ancestor of a Binary Search Tree
- Androdi Bug说明
- 【自分の総括】设计模式之工厂模式(实例分析)
- 开启mongodb服务以及查看数据库中的信息