ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(一)
效果图:
大体上就是这个样子,可能不太清楚 但是大家知道是什么效果就好啦~
(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;@Overrideprotected 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<>();}@Overridepublic int getCount() {return 6;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic 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一下,否则获得的宽度是0int 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;}@Overridepublic 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)(1群满了 请加【Android开发经验交流2群(537532956)】),欢迎大家就加入
ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(一)相关推荐
- ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果(二)
今晚给之前的写的收个尾 http://blog.csdn.net/codenoodles/article/details/50992113 前边没有看的可以先看一下效果. 之前写的没有背景的模糊图片效 ...
- 玩转慕课网App启动引导页效果
转载于"我叫岩仔":http://blog.csdn.net/a1002450926/article/details/50609587 今天给大家带来慕课网App的引导页面的效果实 ...
- Android开发学习之基于ViewPager实现Gallery画廊效果
通过我们前面的学习,我们知道ViewPager是可以做出近乎完美的滑动体验,回顾整个Android,我们发现Gallery具备同样的特点,于是我们大胆地猜想,Gallery是否和ViewPager之间 ...
- 仿制慕课网app实现斗鱼,全民k歌视频引导页(ViewVideoViewPaper)炫酷效果
在几个月前,我第一次玩全民k歌,下载完app,它弹出来的引导页吸引了我,不像以前的引导页一样千篇一律,而是用了视频的方式,用一种动态的方式来实现.在今天,我突然又想起了这个效果,就抽出了一点时间在网上 ...
- 仿慕课网视频播放界面协调布局
近日使用慕课网APP的时候,发现一个页面效果感觉很有意思(正常情况下页面可以滑动,但是当页面中播放视频的时候,只有 下面可以滑动),所以仿照这做了一个,效果图如下: 主要是通过改变AppBarLayo ...
- 仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery
仿花瓣网的自动悬浮导航效果 body, h1, ul { margin:0; } ul li { list-style-type:none; } #header { width:100%; borde ...
- 慕课网app下拉刷新图标填充效果的实现
之前看到一种下拉刷新的效果,与以往的下拉效果都不一样,大多数下拉刷新都是一个圆形进度条在旋转,而这个下拉刷新则是一个不断填充的效果.本以为这是个自定义View,后来反编译慕课网的app后提取资源的时候 ...
- IT学习神器——慕课网App获App Store、Android应用市场重磅推荐
作为国内首个IT学习类应用,慕课网App自上线以来持续获得苹果App Store推荐,是国内唯一一款被App Store推为榜首的教育类应用.慕课网在Android应用市场同样表现优异,受到各大知名应 ...
- 仿慕课网Android端app——慕课Ime(自写服务器接口)
更新:这是在学校的时候写的一个小项目,现在看很多不规范的地方,代码质量自己都不忍直视了(哭--).看到有人给点了"踩",我也确实可以理解,鉴于现在还有不时有同学来找我要源码,为了不 ...
最新文章
- 一位中学计算机老师的英语作文,我的老师英语作文(精选14篇)
- 打破情感分类准确率80分天花板!更充分的知识图谱结合范式
- 数组引用以避免数组降阶(c++)
- 题目1027:欧拉回路
- HarmonyOS之常用组件Button的功能和使用
- ImportError: libgthread-2.0.so.0: cannot open shared object file: No such file or directory
- 阴阳师服务器维护更新,阴阳师服务器3月10日维护更新了什么 阴阳师服务器3月10日维护更新一览...
- kali激活phpstorm_kali+phpstorm+xdebug+firefox配置本地/远程调试
- 汉字转拼音以及五笔码
- Tomcat怎么重启 tomcat重启命令
- 如何生成CGCS2000坐标系等高线
- python, numpy中的.tile方法解释
- 基于嵌入式ARM的mp3播放器的设计
- 5G学习(四):PRACH专题
- 使用Python实现基于API的网易有道翻译功能
- mysql lag over_数据库sql 使用 lag 和OVER 函数和 like 使用 小技巧
- 互联网企业申请95号 正确落地方案可节省50%费用
- Tableau学习笔记①②(雷达图、凹凸图)
- ThinkPad T440换装固态硬盘(SSD)和内存条
- 【大唐杯学习超快速入门】5G技术原理仿真教学——5G网络组网部署