自定义HorizontalScrollView嵌套HorizontalListView实现手势监听、按钮监听横向滚动功能
2016-08-18 22:10
435 查看
今日空闲花了点时间对以前自主实现的项目功能进行改进和优化, 其实一些界面的小功能有时候没实现过,也没经验类似项目功能经验,反而耗费的时间会更多。下面我所描述的界面功能就是我在对用RecyclerView控件不熟悉的情况下使用了HorizontalScrollView来实现的,在我把它优化成RecyclerView控件之前在此做个笔录,方便以后查阅。
按照以往的惯例,先上效果图(既可以手势监听,也可以按钮监听)
1.HorizontalScrollView滑动到最左边的时候,左边箭头光标变灰色
2.HorizontalScrollView滑动到不是最左边也不是最右边的时候,左右两边箭头光标都是较深的灰色
3.HorizontalScrollView滑动到最右边的时候,右边箭头光标变灰色
首先要明确实现的界面功能是:自定义HorizontalScrollView嵌套HorizontalListView实现手势监听、按钮监听滑动。
此处给大家一个自定义HorizontalListView开源库的链接地址:http://pan.baidu.com/s/1dENbGIH(开源库也是我当初从谷歌下载的,那就借此篇文章感谢一下这位开源库的作者,当初是他这个开源库封装得比较好帮助我实现了这个项目所需功能)
有了HorizontalListView开源库,接下去一切事情都好办了,首先需要一个自定义HorizontalScrollView,附上代码:
(参考来自:http://www.cnblogs.com/java-koma/archive/2012/11/02/2751594.html)
接下去写xml布局文件:
好了,一切都准备就绪以后,接下去就是MainActivity.java的主要代码了,也是比较简单的
1.适配器代码
onCreate的代码:
大神勿喷~欢迎大家指导改正
按照以往的惯例,先上效果图(既可以手势监听,也可以按钮监听)
1.HorizontalScrollView滑动到最左边的时候,左边箭头光标变灰色
2.HorizontalScrollView滑动到不是最左边也不是最右边的时候,左右两边箭头光标都是较深的灰色
3.HorizontalScrollView滑动到最右边的时候,右边箭头光标变灰色
首先要明确实现的界面功能是:自定义HorizontalScrollView嵌套HorizontalListView实现手势监听、按钮监听滑动。
此处给大家一个自定义HorizontalListView开源库的链接地址:http://pan.baidu.com/s/1dENbGIH(开源库也是我当初从谷歌下载的,那就借此篇文章感谢一下这位开源库的作者,当初是他这个开源库封装得比较好帮助我实现了这个项目所需功能)
有了HorizontalListView开源库,接下去一切事情都好办了,首先需要一个自定义HorizontalScrollView,附上代码:
(参考来自:http://www.cnblogs.com/java-koma/archive/2012/11/02/2751594.html)
public class MyHorizontalScrollView extends HorizontalScrollView { private Runnable scrollerTask; private int intitPosition; private int newCheck = 100; private int childWidth = 0; public interface OnScrollStopListner { /** * scroll have stoped */ void onScrollStoped(); /** * scroll have stoped, and is at left edge */ void onScrollToLeftEdge(); /** * scroll have stoped, and is at right edge */ void onScrollToRightEdge(); /** * scroll have stoped, and is at middle */ void onScrollToMiddle(); } private OnScrollStopListner onScrollstopListner; public MyHorizontalScrollView(Context context, AttributeSet attrs) { super(context, attrs); scrollerTask = new Runnable() { @Override public void run() { int newPosition = getScrollX(); if (intitPosition - newPosition == 0) { if (onScrollstopListner == null) { return; } onScrollstopListner.onScrollStoped(); Rect outRect = new Rect(); getDrawingRect(outRect); if (getScrollX() == 0) { onScrollstopListner.onScrollToLeftEdge(); } else if (childWidth + getPaddingLeft() + getPaddingRight() == outRect.right) { onScrollstopListner.onScrollToRightEdge(); } else { onScrollstopListner.onScrollToMiddle(); } } else { intitPosition = getScrollX(); postDelayed(scrollerTask, newCheck); } } }; } public void setOnScrollStopListner(OnScrollStopListner listner) { onScrollstopListner = listner; } public void startScrollerTask() { intitPosition = getScrollX(); postDelayed(scrollerTask, newCheck); checkTotalWidth(); } private void checkTotalWidth() { if (childWidth > 0) { return; } for (int i = 0; i < getChildCount(); i++) { childWidth += getChildAt(i).getWidth(); } } }
接下去写xml布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_fff_white" > <LinearLayout android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@color/color_f9" android:gravity="center_vertical" > <RelativeLayout android:id="@+id/rl_news_back" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" > <ImageView android:id="@+id/img_news_back" android:layout_width="30dp" android:layout_height="wrap_content" android:visibility="gone" android:src="@drawable/back"/> <ImageView android:id="@+id/img_news_back_pre" android:layout_width="30dp" android:layout_height="wrap_content" android:src="@drawable/left_gray" /> </RelativeLayout> <com.example.custom.MyHorizontalScrollView android:id="@+id/horizontalScrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0.50" android:scrollbars="none" > <LinearLayout android:layout_width="match_parent" android:layout_height="75dp" android:orientation="horizontal" > <com.meetme.android.horizontallistview.HorizontalListView android:id="@+id/head_horizontalView" android:layout_width="880dp" android:layout_height="75dp"> </com.meetme.android.horizontallistview.HorizontalListView> </LinearLayout> </com.example.custom.MyHorizontalScrollView> <RelativeLayout android:id="@+id/rl_news_enter" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" > <ImageView android:id="@+id/img_news_enter" android:layout_width="30dp" android:layout_height="wrap_content" android:src="@drawable/goenter" /> <ImageView android:id="@+id/img_news_enter_pre" android:layout_width="30dp" android:visibility="gone" android:layout_height="wrap_content" android:src="@drawable/right_gray" /> </RelativeLayout> </LinearLayout> </RelativeLayout>
好了,一切都准备就绪以后,接下去就是MainActivity.java的主要代码了,也是比较简单的
1.适配器代码
//TODO 水平ListViewAdapter class HorizontalListViewAdapter extends BaseAdapter{ @Override public int getCount() { return mHorizontalData.size(); } @Override public Object getItem(int position) { return position; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View layout = null; ViewHolder vh = null; if (convertView == null) { vh = new ViewHolder(); layout = getLayoutInflater().inflate(R.layout.list_item_horizontallistview, null); vh.HorizontalLv_im=(ImageView)layout.findViewById(R.id.financail_item_imageView); vh.HorizontalLv_title=(TextView)layout.findViewById(R.id.financail_item_textView); layout.setTag(vh); } else { layout = convertView;// convertView 不为空 复用消失的行数 vh = (ViewHolder) layout.getTag();// 得到标签 口袋 } HomeData homeData = mHorizontalData.get(position); vh.HorizontalLv_title.setText(homeData.getTitle()); vh.HorizontalLv_im.setImageResource(homeData.getImg()); return layout; } }
//TODO 创建一个查找的类 目的是减少查找次数 无需每次都重复查找 <span style="white-space:pre"> </span>public static class ViewHolder <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>public ImageView HorizontalLv_im; <span style="white-space:pre"> </span>public TextView HorizontalLv_title; <span style="white-space:pre"> </span>}其中HomeData是自定义的一个listview数据优化类,大家可以根据listview的item需求来确定这个类的内容即可,非常简单,此处我就不贴代码了
onCreate的代码:
hlv = (HorizontalListView) findViewById(R.id.head_horizontalView); horizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.horizontalScrollView1); rl_news_back = (RelativeLayout) head_financial_news_headtwo.findViewById(R.id.rl_news_back); rl_news_enter = (RelativeLayout) head_financial_news_headtwo.findViewById(R.id.rl_news_enter); img_news_back = (ImageView) head_financial_news_headtwo.findViewById(R.id.img_news_back); img_news_back_pre = (ImageView) head_financial_news_headtwo.findViewById(R.id.img_news_back_pre); img_news_enter = (ImageView) head_financial_news_headtwo.findViewById(R.id.img_news_enter); img_news_enter_pre = (ImageView) head_financial_news_headtwo.findViewById(R.id.img_news_enter_pre); hlva = new HorizontalListViewAdapter(); hlva.notifyDataSetChanged(); hlv.setAdapter(hlva);
<pre name="code" class="html"> clickHorizontalListview()
<pre name="code" class="html">private void clickHorizontalListview() { hlv.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { tv_tilte.setText(mHorizontalData.get(position).getTitle()); select_item1 = position; //当前选择的节目item hlva.notifyDataSetChanged(); } }); horizontalScrollView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { //如果触动屏幕就执行 if (event.getAction() == MotionEvent.ACTION_UP) { horizontalScrollView.startScrollerTask(); } return false; } }); horizontalScrollView.setOnScrollStopListner(new OnScrollStopListner() { public void onScrollToRightEdge() { img_news_back.setVisibility(View.VISIBLE); img_news_back_pre.setVisibility(View.GONE); img_news_enter.setVisibility(View.GONE); img_news_enter_pre.setVisibility(View.VISIBLE); } public void onScrollToMiddle() { img_news_back.setVisibility(View.VISIBLE); img_news_back_pre.setVisibility(View.GONE); img_news_enter.setVisibility(View.VISIBLE); img_news_enter_pre.setVisibility(View.GONE); } public void onScrollToLeftEdge() { img_news_back.setVisibility(View.GONE); img_news_back_pre.setVisibility(View.VISIBLE); img_news_enter.setVisibility(View.VISIBLE); img_news_enter_pre.setVisibility(View.GONE); } public void onScrollStoped() { } }); rl_news_back.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { horizontalScrollView.smoothScrollBy(-( getWindowManager().getDefaultDisplay().getWidth()-rl_news_back.getWidth()*2),0); horizontalScrollView.startScrollerTask(); } }); rl_news_enter.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { horizontalScrollView.startScrollerTask(); horizontalScrollView.smoothScrollBy(getWindowManager().getDefaultDisplay().getWidth()-rl_news_back.getWidth()*2,0); } }); }
大神勿喷~欢迎大家指导改正
相关文章推荐
- 学习笔记之——RecycleView替换优化HorizontalScrollView嵌套HorizontalListView实现手势监听、按钮监听滑动功能
- 【多级树形菜单-dialog自定义动画弹出方式-手势监听】android实现treeView
- 自定义一个view,并实现最简单的手势识别功能(上)
- UIImageView动画 、自定义View 和手势的简单实用 Tom 猫 全部功能实现
- 我的Android进阶之旅------>Android自定义View来实现解析lrc歌词并同步滚动、上下拖动、缩放歌词的功能
- Android 实现横向标题栏滚动效果(HorizontalScrollView + GridView + Viewpager + 自定义适配器)
- 基于jquery快速实现网页右下角按钮点击后滚动回顶端的功能
- Android 自定义Dialog类,并在Activity中实现按钮监听。
- 模仿微信语音聊天功能(1)项目介绍及自定义按钮实现
- 黄聪:如何给wordpress的编辑器添加一个自定义按钮,并且实现插入功能
- AndoridGridView 自定义适配器 监听事件的使用,实现更换头像功能
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- 自定义一个view,并实现最简单的手势识别功能(下)
- Android 自定义 HorizontalScrollView 实现图片左右滚动按钮控制
- Android自定义按钮实现长按功能
- 自定义View实现手势监听
- Android 自定义Dialog类,并在Activity中实现按钮监听。
- Android 自定义Dialog类,并在Activity中实现按钮监听事件
- iOS手势(滑动)返回的实现(自定义返回按钮)
- IOS之UI--自定义按钮实现代理监听点击事件