文档章节

android 顶部横向滑动菜单效果

 专注移动开发
发布于 2015/06/26 09:09
字数 986
阅读 99
收藏 0

顶部横向滑动菜单效果

android 

这个是在在别人的基础上改的(基本上没改),我就不重造轮子了。 
 
先是自定义的横向ScollView,用Adapter模式填充数据 

Java代码  收藏代码

  1. import com.example.demo.R;  

  2.   

  3. import android.content.Context;  

  4. import android.database.DataSetObserver;  

  5. import android.util.AttributeSet;  

  6. import android.util.SparseArray;  

  7. import android.view.Gravity;  

  8. import android.view.LayoutInflater;  

  9. import android.view.View;  

  10. import android.view.View.OnClickListener;  

  11. import android.view.animation.AccelerateDecelerateInterpolator;  

  12. import android.view.animation.Animation;  

  13. import android.view.animation.AnimationSet;  

  14. import android.view.animation.ScaleAnimation;  

  15. import android.view.animation.TranslateAnimation;  

  16. import android.widget.BaseAdapter;  

  17. import android.widget.FrameLayout;  

  18. import android.widget.HorizontalScrollView;  

  19. import android.widget.ImageView;  

  20. import android.widget.LinearLayout;  

  21. import android.widget.TextView;  

  22.   

  23. public class NavigationHorizontalScrollView extends HorizontalScrollView implements OnClickListener {  

  24.   

  25.     public NavigationHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {  

  26.         super(context, attrs, defStyle);  

  27.         init();  

  28.     }  

  29.   

  30.     public NavigationHorizontalScrollView(Context context, AttributeSet attrs) {  

  31.         super(context, attrs);  

  32.         init();  

  33.     }  

  34.   

  35.     public NavigationHorizontalScrollView(Context context) {  

  36.         super(context);  

  37.         init();  

  38.     }  

  39.   

  40.     private FrameLayout mFrameLayout;  

  41.     private BaseAdapter mBaseAdapter;  

  42.     private SparseArray<View> mSparseArray;  

  43.     private int oldPosition;  

  44.     private TextView backView;  

  45.     private ImageView preImage, nextImage;  

  46.   

  47.     @Override  

  48.     protected void onScrollChanged(int l, int t, int oldl, int oldt) {  

  49.         super.onScrollChanged(l, t, oldl, oldt);  

  50.         resetImageView();  

  51.     }  

  52.   

  53.     private void resetImageView() {  

  54.         /* 计算水平方向滚动条的滑块的偏移值。 */  

  55.         int ScrollOffset = computeHorizontalScrollOffset();  

  56.         /* 滚动条长度 */  

  57.         int ScrollExtent = computeHorizontalScrollExtent();  

  58.         /* 滚动条当前位置 */  

  59.         int curScrollLoc = ScrollOffset + ScrollExtent;  

  60.         /* scrollView 的可滚动水平范围是所有子视图的宽度总合。 */  

  61.         int ScrollRange = computeHorizontalScrollRange();  

  62.   

  63.         /* 如果当前位置 在ScrollExtent 和 ScrollRange 之间,左右两边的View都显示 */  

  64.         if (curScrollLoc > ScrollExtent && curScrollLoc < ScrollRange) {  

  65.             if (preImage != null)  

  66.                 preImage.setVisibility(View.VISIBLE);  

  67.             if (nextImage != null)  

  68.                 nextImage.setVisibility(View.VISIBLE);  

  69.             return;  

  70.         }  

  71.         /* 如果滚动到最左边 */  

  72.         if (curScrollLoc == ScrollExtent) {  

  73.             if (preImage != null)  

  74.                 preImage.setVisibility(View.INVISIBLE);  

  75.             return;  

  76.         }  

  77.         /* 如果滚动到最右边 */  

  78.         if (curScrollLoc >= ScrollRange) {  

  79.             if (nextImage != null)  

  80.                 nextImage.setVisibility(View.INVISIBLE);  

  81.             return;  

  82.         }  

  83.   

  84.     }  

  85.   

  86.     private void init() {  

  87.         mFrameLayout = new FrameLayout(getContext());  

  88.         mFrameLayout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  

  89.         addView(mFrameLayout);  

  90.         mSparseArray = new SparseArray<View>();  

  91.     }  

  92.   

  93.     private void buildItemView() {  

  94.         if (mBaseAdapter == null)  

  95.             return;  

  96.         LinearLayout linearLayout = new LinearLayout(getContext());  

  97.         for (int i = 0; i < mBaseAdapter.getCount(); i++) {  

  98.             View view = mBaseAdapter.getView(i, mSparseArray.get(i), this);  

  99.             view.setOnClickListener(this);  

  100.             mSparseArray.put(i, view);  

  101.             linearLayout.addView(mSparseArray.get(i));  

  102.         }  

  103.         LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,  

  104.                 LinearLayout.LayoutParams.FILL_PARENT);  

  105.         layoutParams.gravity = Gravity.CENTER_VERTICAL;  

  106.         backView = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.navigation_item, null);  

  107.         backView.setBackgroundResource(R.drawable.bg_view);  

  108.         backView.setPadding(0505);  

  109.         mFrameLayout.addView(backView, layoutParams);  

  110.         mFrameLayout.addView(linearLayout);  

  111.     }  

  112.   

  113.     public void setAdapter(BaseAdapter baseAdapter) {  

  114.         if (baseAdapter == null)  

  115.             return;  

  116.         mBaseAdapter = baseAdapter;  

  117.         mBaseAdapter.registerDataSetObserver(new DataSetObserver() {  

  118.             @Override  

  119.             public void onChanged() {  

  120.                 oldPosition = 0;  

  121.                 buildItemView();  

  122.                 super.onChanged();  

  123.             }  

  124.         });  

  125.         mBaseAdapter.notifyDataSetChanged();  

  126.     }  

  127.   

  128.     @Override  

  129.     public void onClick(View v) {  

  130.         if (v.getId() == preImage.getId()) {  

  131.             fling(-800);  

  132.             return;  

  133.         }  

  134.         if (v.getId() == nextImage.getId()) {  

  135.             fling(800);  

  136.             return;  

  137.         }  

  138.         if (onItemClickListener != null) {  

  139.             int position = mSparseArray.indexOfValue(v);  

  140.             startAnimation(position);  

  141.             oldPosition = position;  

  142.             onItemClickListener.click(position);  

  143.         }  

  144.     }  

  145.   

  146.     private void startAnimation(int position) {  

  147.         AnimationSet animationSet = new AnimationSet(true);  

  148.         animationSet.addAnimation(buildScaleAnimation(oldPosition, position));  

  149.         animationSet.addAnimation(buildTranslateAnimation(oldPosition, position));  

  150.         animationSet.setInterpolator(new AccelerateDecelerateInterpolator());  

  151.         /* 移动后不复原,不返回动画前的状态位置 */  

  152.         animationSet.setFillAfter(true);  

  153.         animationSet.setDuration(500);  

  154.         backView.startAnimation(animationSet);  

  155.         invalidate();  

  156.     }  

  157.   

  158.     private Animation buildScaleAnimation(int oldPosition, int position) {  

  159.         float oldWidth = getItemView(oldPosition).getWidth();  

  160.         float newWidth = getItemView(position).getWidth();  

  161.         float fromX = oldWidth / backView.getWidth();  

  162.         float toX = newWidth / backView.getWidth();  

  163.         ScaleAnimation animation = new ScaleAnimation(fromX, toX, 1f, 1f, Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE,  

  164.                 0.0f);  

  165.         return animation;  

  166.     }  

  167.   

  168.     private Animation buildTranslateAnimation(int oldPosition, int position) {  

  169.         TranslateAnimation animation = new TranslateAnimation(getItemView(oldPosition).getLeft(), getItemView(position)  

  170.                 .getLeft(), 00);  

  171.         return animation;  

  172.     }  

  173.   

  174.     private View getItemView(int position) {  

  175.         return mSparseArray.get(position);  

  176.     }  

  177.   

  178.     public interface OnItemClickListener {  

  179.         void click(int position);  

  180.     }  

  181.   

  182.     private OnItemClickListener onItemClickListener;  

  183.   

  184.     public void setOnItemClickListener(OnItemClickListener onItemClickListener) {  

  185.         this.onItemClickListener = onItemClickListener;  

  186.     }  

  187.   

  188.     public void setImageView(ImageView preImage, ImageView nextImage) {  

  189.         this.preImage = preImage;  

  190.         this.nextImage = nextImage;  

  191.         if (preImage != null) {  

  192.             preImage.setOnClickListener(this);  

  193.         }  

  194.         if (nextImage != null) {  

  195.             nextImage.setOnClickListener(this);  

  196.         }  

  197.     }  

  198.   

  199. }  



用法: 

Java代码  收藏代码

  1. import java.util.ArrayList;  

  2. import java.util.List;  

  3.   

  4. import android.app.Activity;  

  5. import android.content.Context;  

  6. import android.os.Bundle;  

  7. import android.view.LayoutInflater;  

  8. import android.view.View;  

  9. import android.view.ViewGroup;  

  10. import android.widget.BaseAdapter;  

  11. import android.widget.ImageView;  

  12. import android.widget.TextView;  

  13.   

  14. import com.example.demo.model.Navigation;  

  15. import com.example.demo.widget.NavigationHorizontalScrollView;  

  16.   

  17. public class MainActivity extends Activity{  

  18.           

  19.     private Context context;  

  20.     private List<Navigation> navs = buildNavigation();  

  21.     private NavigationHorizontalScrollView mHorizontalScrollView;  

  22.     private TextView tv;  

  23.     @Override  

  24.     public void onCreate(Bundle savedInstanceState) {  

  25.         super.onCreate(savedInstanceState);  

  26.         setContentView(R.layout.activity_main);  

  27.         context=this;  

  28.         tv=(TextView)findViewById(R.id.tv);  

  29.         tv.setText("You clicked "+navs.get(0).getTitle());  

  30.           

  31.         mHorizontalScrollView=(NavigationHorizontalScrollView)findViewById(R.id.horizontal_scrollview);  

  32.         mHorizontalScrollView.setImageView((ImageView) findViewById(R.id.iv_pre),(ImageView) findViewById(R.id.iv_next));  

  33.                   

  34.         mHorizontalScrollView.setOnItemClickListener(new NavigationHorizontalScrollView.OnItemClickListener() {  

  35.               

  36.             @Override  

  37.             public void click(int position) {  

  38.                 // TODO Auto-generated method stub  

  39.                 tv.setText("You clicked "+navs.get(position).getTitle());  

  40.             }  

  41.         });  

  42.           

  43.         mHorizontalScrollView.setAdapter(new NavigationAdapter());  

  44.           

  45.     }  

  46.   

  47.     private List<Navigation> buildNavigation() {  

  48.         List<Navigation> navigations = new ArrayList<Navigation>();  

  49.         navigations.add(new Navigation(0"url""首页"));  

  50.         navigations.add(new Navigation(1"url""新闻"));  

  51.         navigations.add(new Navigation(2"url""科技"));  

  52.         navigations.add(new Navigation(3"url""设置"));  

  53.         navigations.add(new Navigation(4"url""朋友"));  

  54.         navigations.add(new Navigation(5"url""测试长标题"));  

  55.         navigations.add(new Navigation(7"url""测试"));  

  56.         navigations.add(new Navigation(6"url""我的宝贝"));  

  57.         return navigations;  

  58.     }  

  59.   

  60.       

  61.     class NavigationAdapter extends BaseAdapter {  

  62.   

  63.         @Override  

  64.         public int getCount() {  

  65.             return navs.size();  

  66.         }  

  67.   

  68.         @Override  

  69.         public Object getItem(int position) {  

  70.             return navs.get(position);  

  71.         }  

  72.   

  73.         @Override  

  74.         public long getItemId(int position) {  

  75.             return position;  

  76.         }  

  77.   

  78.         @Override  

  79.         public View getView(int position, View convertView, ViewGroup parent) {  

  80.             if (convertView == null) {  

  81.                 convertView = LayoutInflater.from(context).inflate(R.layout.navigation_item, null);  

  82.             }  

  83.             ((TextView) convertView).setText(navs.get(position).getTitle());  

  84.             return convertView;  

  85.         }  

  86.   

  87.     }  

  88.       

  89. }  


布局: 

Xml代码  收藏代码

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

  2.     android:layout_width="match_parent"  

  3.     android:layout_height="match_parent"  

  4.     android:orientation="vertical" >  

  5.   

  6.     <LinearLayout  

  7.     android:layout_width="match_parent"  

  8.     android:layout_height="wrap_content"  

  9.     android:orientation="horizontal"  

  10.     >  

  11.   

  12.     <ImageView  

  13.         android:id="@+id/iv_pre"  

  14.         android:layout_width="30dip"  

  15.         android:layout_height="30dip"  

  16.         android:layout_gravity="center_vertical"  

  17.         android:src="@drawable/ic_pre" />  

  18.   

  19.     <com.example.demo.widget.NavigationHorizontalScrollView  

  20.         android:id="@+id/horizontal_scrollview"  

  21.         android:layout_width="wrap_content"  

  22.         android:layout_height="wrap_content"  

  23.         android:layout_gravity="center_vertical"  

  24.         android:layout_weight="1"  

  25.         android:paddingBottom="2dip"  

  26.         android:paddingTop="2dip"  

  27.         android:scrollbars="none" />  

  28.   

  29.     <ImageView  

  30.         android:id="@+id/iv_next"  

  31.         android:layout_width="30dip"  

  32.         android:layout_height="30dip"  

  33.         android:layout_gravity="center_vertical"  

  34.         android:src="@drawable/ic_next" />  

  35.   

  36.     </LinearLayout>  

  37.     <FrameLayout  

  38.         android:layout_width="fill_parent"  

  39.         android:layout_height="fill_parent" >  

  40.         <TextView   

  41.             android:id="@+id/tv"  

  42.             android:layout_width="wrap_content"  

  43.             android:layout_height="wrap_content"  

  44.             android:textColor="@android:color/black"  

  45.             android:textSize="24sp"  

  46.             android:layout_gravity="center"  

  47.             />  

  48.     </FrameLayout>  

  49.   

  50. </LinearLayout>  



具体看附件


本文转载自:http://gundumw100.iteye.com/blog/1874228

共有 人打赏支持
粉丝 3
博文 48
码字总数 3957
作品 0
杭州
技术主管
私信 提问
Android实现导航菜单左右滑动效果

本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果。 在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果,有兴趣的朋友可以查看: http://www.cnblogs.com/h...

迷途d书童
2012/04/26
6.3K
1
高仿美团app,浮动layout滑动到顶部悬停效果

做了个类似美团app的一个效果 当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。 因此,我特意也写了一个:浮动layuot滑动到顶部悬...

谁带我去看看世界
2015/06/16
0
4
【压岁干货】精彩技术博客+优秀源码集锦

虽然2015年已经过了一月有余,但在中国,好像只有过了春节才算进入新的一年。眼看着这也春节倒计时了,大家好像又都忙了起来,赶项目赶项目…… 从DevStore整理了一些优秀的技术博客和源码作...

牵着蜗牛去西藏
2015/02/04
1K
4
Android 自定义ScrollView ListView 体验各种纵向滑动的需求

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lmj623565791/article/details/38950509 转载请标明出处:http://blog.csdn.net/lmj623565791/article/detai...

鸿洋_
2014/08/31
0
0
谢谢您帮我解答一下,谢谢谢谢谢谢谢

@邓凡平 你好,想跟你请教个问题:@邓凡平 你好,想跟你请教个问题:android中,如何实现顶部有一个导航的菜单,中间可以滑动切换,然后底部有也有一个菜单,但是底部菜单要跳转到其他的地方...

邓思学
2013/08/07
171
2

没有更多内容

加载失败,请刷新页面

加载更多

利用神器BTrace 追踪线上 Spring Boot应用运行时信息

概述 生产环境中的服务可能会出现各种问题,但总不能让服务下线来专门排查错误,这时候最好有一些手段来获取程序运行时信息,比如 接口方法参数/返回值、外部调用情况 以及 函数执行时间等信...

CodeSheep
41分钟前
3
0
OSChina 周四乱弹 —— 我想过年请假提前回家两天

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :#每日一歌# 分享王力宏的单曲《爱错》 《爱错》- 王力宏 手机党少年们想听歌,请使劲儿戳(这里) @Caremorele :这几天起床有点...

小小编辑
今天
59
5
Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
3
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部