仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现
仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现
百度壁纸系列
仿百度壁纸客户端(一)——主框架搭建,自定义Tab + ViewPager + Fragment
仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现
仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙
仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字
仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
上回把广告轮播图给实现了,今天就来把主页的大部分功能给实现了
一.ScrollView和ViewPager滑动事件冲突的解决办法
我们仔细想想,我们的主页架构,首先他是上下滑动的,所以这样要一个ScrollView,然后就是轮播图和其他内容了,这样的话,上下滑动有事件,轮播图也有事件,我们先看下xml的实现原理
home_fragment_xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ScrollView
android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayout
android:layout_width="match_parent"android:layout_height="match_parent"><com.lgl.baiduwallpaper.view.VPScrollLayout
android:id="@+id/vp_scroll"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextView
android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/vp_scroll"android:text="其他内容"android:textSize="50dp" /></RelativeLayout></ScrollView></RelativeLayout>
這裡很清晰的可以看出层级关系了,他事件冲突时必然的,解决办法也是很简单,就单以这个架构来讲的话,其实只要判断他是上下滑动还是左右滑动就好,如果是左右滑动,就不给ScrollView传递事件了,如果是上下滑动的话,让ScrollView自身来处理了,所以我们需要重写ScrollView
DisScrollView
package com.lgl.baiduwallpaper.view;import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;/*** 事件冲突解决* Created by lgl on 16/4/3.*/
public class DisScrollView extends ScrollView {//手指按下的开始坐标private float startX, startY;//手指移动的移动坐标private float currentX, currentY;//手指抬起的最后坐标private float endX, endY;//手指按下后的移动距离private float distanceX,distanceY;/*** 构造方法** @param context* @param attrs*/public DisScrollView(Context context, AttributeSet attrs) {super(context, attrs);}/*** 事件分发** @param ev* @return*/@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {return super.dispatchTouchEvent(ev);}/*** 事件拦截** @param ev* @return*/@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {switch (ev.getAction()) {//按下事件case MotionEvent.ACTION_DOWN://获取坐标startX = ev.getX();startY = ev.getY();break;//移动事件case MotionEvent.ACTION_MOVE://获取坐标currentX = ev.getX();currentY = ev.getY();distanceX += Math.abs(currentX - startX);distanceY += Math.abs(currentY - startY);startX = currentX;startY = currentY;//判断滑动方向if(distanceX >distanceY){ //左右滑动,//不拦截事件return false;}break;}//上下移动自身处理return super.onInterceptTouchEvent(ev);}
}
OK,我们运行一下
关键是把逻辑处理好
二.GridView实现壁纸列表
1.ScrollView和GridView事件冲突
我们可以看看百度壁纸的效果,我们也来实现一下
我们要实现的就是下面的一个壁纸列表,这里我们就要考虑一下了,怎么去实现,实际上,不管是ScrollView还是GridView他们都是内存超出屏幕才回去执行滑动事件,这样的话,我们自定义一个GridView把高直接写好就可以了
DisGridView
package com.lgl.baiduwallpaper.view;import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;/*** 事件冲突* Created by lgl on 16/4/3.*/
public class DisGridView extends GridView {/*** 事件冲突** @param context* @param attrs*/public DisGridView(Context context, AttributeSet attrs) {super(context, attrs);}/*** View的测量,获得页面的整体尺寸** @param widthMeasureSpec* @param heightMeasureSpec*/@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int height = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, height);}
}
然后我们就可以写布局了
home_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.lgl.baiduwallpaper.view.DisScrollViewandroid:id="@+id/disScroolView"android:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.lgl.baiduwallpaper.view.VPScrollLayoutandroid:id="@+id/vp_scroll"android:layout_width="match_parent"android:layout_height="wrap_content" /><com.lgl.baiduwallpaper.view.DisGridViewandroid:horizontalSpacing="10dp"android:verticalSpacing="10dp"android:numColumns="2"android:id="@+id/gridview"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/vp_scroll" /></RelativeLayout></com.lgl.baiduwallpaper.view.DisScrollView></RelativeLayout>
现在触摸事件已经OK了
2.实现壁纸列表
这里我们没有借口,就使用本地的壁纸了,但是完全都是按照网络请求操作来的,这里使用的解析图片的开源看是SmartImageView
开源地址:https://github.com/loopj/android-smart-image-view
既然要使用GridView,那就必须要有一个实体类和一个item吧
HomeGrid
package com.lgl.baiduwallpaper.entity;/*** GridView数据实体类* Created by lgl on 16/4/3.*/
public class HomeGrid {/*** 当我们开发的时候,这里应该是个接口,那应该是String类型* 我们现在模拟的是本地的图片,所以是int*/public HomeGrid(){super();}public HomeGrid(String type, int img) {this.type = type;this.img = img;}private int img;//描述private String type;public int getImg() {return img;}public void setImg(int img) {this.img = img;}public String getType() {return type;}public void setType(String type) {this.type = type;}@Overridepublic String toString() {return "HomeGrid{" +"img=" + img +", type='" + type + '\'' +'}';}}
grid_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="200dp"android:orientation="vertical"><com.loopj.android.image.SmartImageView
android:id="@+id/mySmartImageView"android:layout_width="wrap_content"android:layout_height="match_parent" /><TextView
android:id="@+id/tv_nice"android:layout_width="match_parent"android:layout_height="40dp"android:layout_alignParentBottom="true"android:alpha="0.3"android:background="#000"android:gravity="left|center_vertical"android:paddingLeft="15dp"android:textColor="#fff"android:textSize="16sp" /></RelativeLayout>
然后我们回到HomeFragment中,我们定义一个方法initGridData
/*** 初始化GridView的数据*/private void initGridData() {for (int i = 0; i < 10; i++) {HomeGrid grid = new HomeGrid();grid.setImg(R.drawable.nice);grid.setType("美女");gridData.add(grid);}}
现在可以定义一个adapter了
/*** GridView的adapter*/private class GridViewAdapter extends BaseAdapter {private Context context;private LayoutInflater inflater;/*** 构造方法** @param context*/public GridViewAdapter(Context context) {this.context = context;inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}@Overridepublic int getCount() {return gridData.size();}@Overridepublic Object getItem(int position) {return gridData.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder viewHolder;//第一次加载if (convertView == null) {convertView = inflater.inflate(R.layout.grid_item, null);viewHolder = new ViewHolder();viewHolder.img = (SmartImageView) convertView.findViewById(R.id.mySmartImageView);viewHolder.tv = (TextView) convertView.findViewById(R.id.tv_nice);convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();}// viewHolder.img.setImageResource(gridData.get(position).getImg());viewHolder.img.setBackgroundResource(gridData.get(position).getImg());viewHolder.tv.setText(gridData.get(position).getType());//动态设置高度convertView.setLayoutParams(new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT,300));return convertView;}}private static class ViewHolder {private SmartImageView img;private TextView tv;}
写到这里,基本上就可以看到效果了
但是还是有一些细节需要处理的,比图scroolview一进来需要回滚到第一行
//设置每次进入现最前面
disScroolView.smoothScrollTo(0,0);
看代码应该就能看的很清晰了吧,我们来演示一下
有一点小粗糙,这就需要各位自己去完善了
三.意见反馈
我们滑动到最后会发现,有一个意见反馈,我们去实现它
在这里我们先不做跳转,先只是十点他的点击效果吧,也是相当点击简单,我们只要在DisGridView加上一个布局
<RelativeLayout
android:clickable="true"android:background="@drawable/bottom_select"android:layout_below="@+id/gridview"android:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayout
android:layout_centerInParent="true"android:gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"><ImageView
android:src="@drawable/image_more_icon_feedback"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextView
android:layout_marginLeft="5dp"android:text="意见反馈"android:textSize="18sp"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout></RelativeLayout>
就可以了,这里我们还要实现它的点击效果
bottom_select.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/image_more_subitems_bottom_selected" android:state_enabled="true" android:state_pressed="true"></item><item android:drawable="@drawable/image_more_subitems_bottom_selected" android:state_pressed="true"></item><item android:state_pressed="false" android:drawable="@drawable/image_more_subitems_bottom"></item>
</selector>
让我们来运行一下吧
这里我把完整的HomeFragment贴上,就不上传源码了
HomeFragment
package com.lgl.baiduwallpaper.fragment;import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.BaseAdapter;
import android.widget.TextView;import com.lgl.baiduwallpaper.R;
import com.lgl.baiduwallpaper.entity.HomeGrid;
import com.lgl.baiduwallpaper.view.DisGridView;
import com.lgl.baiduwallpaper.view.DisScrollView;
import com.lgl.baiduwallpaper.view.VPScrollLayout;
import com.loopj.android.image.SmartImageView;import java.util.ArrayList;/*** 主页* Created by lgl on 16/3/31.*/
public class HomeFragment extends Fragment {private VPScrollLayout vpScroll;private ViewPager myViewPager;private ArrayList<View> bitmap = new ArrayList<View>();private DisGridView mGridView;private ArrayList<HomeGrid> gridData = new ArrayList<HomeGrid>();private DisScrollView disScroolView;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.home_fragment, container, false);findView(view);return view;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);init();}/*** 初始化*/private void init() {initVPData();initGridData();myViewPager.setAdapter(new MyAdapter());//设置几秒轮播vpScroll.setPagerFromTime(1000);//设置adaptermGridView.setAdapter(new GridViewAdapter(getActivity()));//设置每次进入现最前面disScroolView.smoothScrollTo(0,0);}/*** 初始化GridView的数据*/private void initGridData() {for (int i = 0; i < 10; i++) {HomeGrid grid = new HomeGrid();grid.setImg(R.drawable.nice);grid.setType("美女");gridData.add(grid);}}/*** 初始化图片*/private void initVPData() {LayoutInflater inflater1 = getActivity().getLayoutInflater();View view1 = inflater1.inflate(R.layout.vp_seroll_item, null);view1.findViewById(R.id.vpImg).setBackgroundResource(R.mipmap.img1);bitmap.add(view1);LayoutInflater inflater2 = getActivity().getLayoutInflater();View view2 = inflater2.inflate(R.layout.vp_seroll_item, null);view2.findViewById(R.id.vpImg).setBackgroundResource(R.mipmap.img2);bitmap.add(view2);LayoutInflater inflater3 = getActivity().getLayoutInflater();View view3 = inflater3.inflate(R.layout.vp_seroll_item, null);view3.findViewById(R.id.vpImg).setBackgroundResource(R.mipmap.img3);bitmap.add(view3);LayoutInflater inflater4 = getActivity().getLayoutInflater();View view4 = inflater4.inflate(R.layout.vp_seroll_item, null);view4.findViewById(R.id.vpImg).setBackgroundResource(R.mipmap.img4);bitmap.add(view4);}/*** 绑定** @param view*/private void findView(View view) {vpScroll = (VPScrollLayout) view.findViewById(R.id.vp_scroll);//直接拿到myViewPager = vpScroll.getViewPager();mGridView = (DisGridView) view.findViewById(R.id.gridview);disScroolView = (DisScrollView) view.findViewById(R.id.disScroolView);}/*** adapter*/private class MyAdapter extends PagerAdapter {@Overridepublic int getCount() {return bitmap.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object);//删除((ViewPager) container).removeView(bitmap.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {((ViewPager) container).addView(bitmap.get(position));return bitmap.get(position);}}/*** GridView的adapter*/private class GridViewAdapter extends BaseAdapter {private Context context;private LayoutInflater inflater;/*** 构造方法** @param context*/public GridViewAdapter(Context context) {this.context = context;inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}@Overridepublic int getCount() {return gridData.size();}@Overridepublic Object getItem(int position) {return gridData.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder viewHolder;//第一次加载if (convertView == null) {convertView = inflater.inflate(R.layout.grid_item, null);viewHolder = new ViewHolder();viewHolder.img = (SmartImageView) convertView.findViewById(R.id.mySmartImageView);viewHolder.tv = (TextView) convertView.findViewById(R.id.tv_nice);convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();}// viewHolder.img.setImageResource(gridData.get(position).getImg());viewHolder.img.setBackgroundResource(gridData.get(position).getImg());viewHolder.tv.setText(gridData.get(position).getType());//动态设置高度convertView.setLayoutParams(new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT,300));return convertView;}}private static class ViewHolder {private SmartImageView img;private TextView tv;}
}
好了,我们首页就已经做好了,是不是非常的简单尼?在我们的分析之后,其实这个软件也就那么回事哈
Demo下载地址:http://download.csdn.net/detail/qq_26787115/9480171
仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现相关推荐
- 仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现...
仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
- Android高仿网易新闻客户端之首页
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用V ...
- VUE仿知乎网站(三)首页主体部分开发
- 仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙
仿百度壁纸客户端(四)--自定义上拉加载实现精选壁纸墙 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端(二)--主页自 ...
- 仿百度壁纸客户端(一)——主框架搭建,自定义Tab+ViewPager+Fragment
仿百度壁纸客户端(一)--主框架搭建,自定义Tab+ViewPager+Fragment 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment ...
- 仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...
- 仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
- 仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字
仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Frag ...
- 仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化...
仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...
最新文章
- 【Windows 逆向】OD 调试器工具 ( CE 工具通过查找访问的方式找到子弹数据基地址 | 使用 OD 工具附加游戏进程 | 在 OD 工具中查看子弹数据地址 | 推荐 )
- csharp通过dll调用opencv函数,图片作为参数
- Android音频系统之AudioPolicyService
- 1449 砝码称重(思维)
- 程序员求职面试丨面试必备之终极指导篇,掌握这些,面试不再困难!
- android通过json生成视图
- 软考信息安全工程师备考笔记8:第八章应用系统安全工程备考要点
- oracle链接池满了怎么办,Oracle连接数满了
- memento模式_Java中的Memento设计模式
- Linux基础知识-文件管理
- android 单位选择器,Android-PickerView
- HTML代码实现简易购物车-web前端教程
- 图形化开发(五)011-Three.js之Geometry几何体——立方体、圆形、圆锥
- 美国国父乔治华盛顿首任就职演说
- 近20万奖金+ 学术会议论文:2021PAKDD异常检测大赛来了!
- Python怎样提高视频清晰度和对比度?通过这篇直接学会。
- 可视化创建企业管理app
- 归纳偏置/归纳偏差/inductive bias
- BUUCTF:[安洵杯 2019]吹着贝斯扫二维码
- 【uniapp】使用Vant组件van-toast与van-dialog