`

顶部横向滑动菜单效果

阅读更多
这个是在在别人的基础上改的(基本上没改),我就不重造轮子了。

先是自定义的横向ScollView,用Adapter模式填充数据
import com.example.demo.R;

import android.content.Context;
import android.database.DataSetObserver;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.BaseAdapter;
import android.widget.FrameLayout;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class NavigationHorizontalScrollView extends HorizontalScrollView implements OnClickListener {

	public NavigationHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public NavigationHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public NavigationHorizontalScrollView(Context context) {
		super(context);
		init();
	}

	private FrameLayout mFrameLayout;
	private BaseAdapter mBaseAdapter;
	private SparseArray<View> mSparseArray;
	private int oldPosition;
	private TextView backView;
	private ImageView preImage, nextImage;

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		resetImageView();
	}

	private void resetImageView() {
		/* 计算水平方向滚动条的滑块的偏移值。 */
		int ScrollOffset = computeHorizontalScrollOffset();
		/* 滚动条长度 */
		int ScrollExtent = computeHorizontalScrollExtent();
		/* 滚动条当前位置 */
		int curScrollLoc = ScrollOffset + ScrollExtent;
		/* scrollView 的可滚动水平范围是所有子视图的宽度总合。 */
		int ScrollRange = computeHorizontalScrollRange();

		/* 如果当前位置 在ScrollExtent 和 ScrollRange 之间,左右两边的View都显示 */
		if (curScrollLoc > ScrollExtent && curScrollLoc < ScrollRange) {
			if (preImage != null)
				preImage.setVisibility(View.VISIBLE);
			if (nextImage != null)
				nextImage.setVisibility(View.VISIBLE);
			return;
		}
		/* 如果滚动到最左边 */
		if (curScrollLoc == ScrollExtent) {
			if (preImage != null)
				preImage.setVisibility(View.INVISIBLE);
			return;
		}
		/* 如果滚动到最右边 */
		if (curScrollLoc >= ScrollRange) {
			if (nextImage != null)
				nextImage.setVisibility(View.INVISIBLE);
			return;
		}

	}

	private void init() {
		mFrameLayout = new FrameLayout(getContext());
		mFrameLayout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		addView(mFrameLayout);
		mSparseArray = new SparseArray<View>();
	}

	private void buildItemView() {
		if (mBaseAdapter == null)
			return;
		LinearLayout linearLayout = new LinearLayout(getContext());
		for (int i = 0; i < mBaseAdapter.getCount(); i++) {
			View view = mBaseAdapter.getView(i, mSparseArray.get(i), this);
			view.setOnClickListener(this);
			mSparseArray.put(i, view);
			linearLayout.addView(mSparseArray.get(i));
		}
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
				LinearLayout.LayoutParams.FILL_PARENT);
		layoutParams.gravity = Gravity.CENTER_VERTICAL;
		backView = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.navigation_item, null);
		backView.setBackgroundResource(R.drawable.bg_view);
		backView.setPadding(0, 5, 0, 5);
		mFrameLayout.addView(backView, layoutParams);
		mFrameLayout.addView(linearLayout);
	}

	public void setAdapter(BaseAdapter baseAdapter) {
		if (baseAdapter == null)
			return;
		mBaseAdapter = baseAdapter;
		mBaseAdapter.registerDataSetObserver(new DataSetObserver() {
			@Override
			public void onChanged() {
				oldPosition = 0;
				buildItemView();
				super.onChanged();
			}
		});
		mBaseAdapter.notifyDataSetChanged();
	}

	@Override
	public void onClick(View v) {
		if (v.getId() == preImage.getId()) {
			fling(-800);
			return;
		}
		if (v.getId() == nextImage.getId()) {
			fling(800);
			return;
		}
		if (onItemClickListener != null) {
			int position = mSparseArray.indexOfValue(v);
			startAnimation(position);
			oldPosition = position;
			onItemClickListener.click(position);
		}
	}

	private void startAnimation(int position) {
		AnimationSet animationSet = new AnimationSet(true);
		animationSet.addAnimation(buildScaleAnimation(oldPosition, position));
		animationSet.addAnimation(buildTranslateAnimation(oldPosition, position));
		animationSet.setInterpolator(new AccelerateDecelerateInterpolator());
		/* 移动后不复原,不返回动画前的状态位置 */
		animationSet.setFillAfter(true);
		animationSet.setDuration(500);
		backView.startAnimation(animationSet);
		invalidate();
	}

	private Animation buildScaleAnimation(int oldPosition, int position) {
		float oldWidth = getItemView(oldPosition).getWidth();
		float newWidth = getItemView(position).getWidth();
		float fromX = oldWidth / backView.getWidth();
		float toX = newWidth / backView.getWidth();
		ScaleAnimation animation = new ScaleAnimation(fromX, toX, 1f, 1f, Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE,
				0.0f);
		return animation;
	}

	private Animation buildTranslateAnimation(int oldPosition, int position) {
		TranslateAnimation animation = new TranslateAnimation(getItemView(oldPosition).getLeft(), getItemView(position)
				.getLeft(), 0, 0);
		return animation;
	}

	private View getItemView(int position) {
		return mSparseArray.get(position);
	}

	public interface OnItemClickListener {
		void click(int position);
	}

	private OnItemClickListener onItemClickListener;

	public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
		this.onItemClickListener = onItemClickListener;
	}

	public void setImageView(ImageView preImage, ImageView nextImage) {
		this.preImage = preImage;
		this.nextImage = nextImage;
		if (preImage != null) {
			preImage.setOnClickListener(this);
		}
		if (nextImage != null) {
			nextImage.setOnClickListener(this);
		}
	}

}


用法:
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.demo.model.Navigation;
import com.example.demo.widget.NavigationHorizontalScrollView;

public class MainActivity extends Activity{
		
	private Context context;
	private List<Navigation> navs = buildNavigation();
	private NavigationHorizontalScrollView mHorizontalScrollView;
	private TextView tv;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		context=this;
		tv=(TextView)findViewById(R.id.tv);
		tv.setText("You clicked "+navs.get(0).getTitle());
		
		mHorizontalScrollView=(NavigationHorizontalScrollView)findViewById(R.id.horizontal_scrollview);
		mHorizontalScrollView.setImageView((ImageView) findViewById(R.id.iv_pre),(ImageView) findViewById(R.id.iv_next));
				
		mHorizontalScrollView.setOnItemClickListener(new NavigationHorizontalScrollView.OnItemClickListener() {
			
			@Override
			public void click(int position) {
				// TODO Auto-generated method stub
				tv.setText("You clicked "+navs.get(position).getTitle());
			}
		});
		
		mHorizontalScrollView.setAdapter(new NavigationAdapter());
		
	}

	private List<Navigation> buildNavigation() {
		List<Navigation> navigations = new ArrayList<Navigation>();
		navigations.add(new Navigation(0, "url", "首页"));
		navigations.add(new Navigation(1, "url", "新闻"));
		navigations.add(new Navigation(2, "url", "科技"));
		navigations.add(new Navigation(3, "url", "设置"));
		navigations.add(new Navigation(4, "url", "朋友"));
		navigations.add(new Navigation(5, "url", "测试长标题"));
		navigations.add(new Navigation(7, "url", "测试"));
		navigations.add(new Navigation(6, "url", "我的宝贝"));
		return navigations;
	}

	
	class NavigationAdapter extends BaseAdapter {

		@Override
		public int getCount() {
			return navs.size();
		}

		@Override
		public Object getItem(int position) {
			return navs.get(position);
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			if (convertView == null) {
				convertView = LayoutInflater.from(context).inflate(R.layout.navigation_item, null);
			}
			((TextView) convertView).setText(navs.get(position).getTitle());
			return convertView;
		}

	}
	
}

布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <ImageView
        android:id="@+id/iv_pre"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_pre" />

    <com.example.demo.widget.NavigationHorizontalScrollView
        android:id="@+id/horizontal_scrollview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:paddingBottom="2dip"
        android:paddingTop="2dip"
        android:scrollbars="none" />

    <ImageView
        android:id="@+id/iv_next"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_next" />

	</LinearLayout>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    	<TextView 
    	    android:id="@+id/tv"
    	    android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:textColor="@android:color/black"
        	android:textSize="24sp"
        	android:layout_gravity="center"
    	    />
    </FrameLayout>

</LinearLayout>


具体看附件
  • 大小: 35.7 KB
分享到:
评论

相关推荐

    android顶部横向滑动菜单

    android顶部横向滑动菜单

    横向滑动导航

    HorizontalScrollView和ViewPager联动效果,实现顶部横向导航栏的效果

    ios-Swift导航栏菜单,可滑动菜单,可展开菜单.zip

    两行代码搞定导航栏菜单,基于SCNavTabBar

    jquery收集效果集合一些选项卡/菜单等很实用的特效

    JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...

    Android项目实战之仿网易顶部导航栏效果

    所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,...

    基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航; &lt;!DOCTYPE ...

    jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    主要介绍了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单,可实现页面向下滑动后导航栏横向悬浮并固定在顶部的功能,涉及jQuery事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下

    JQuery&CSS;&CSS;+DIV实例大全.rar

    打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown给大家 33.分享下载jquery+Css黑色风格版的手风琴菜单,带...

    web开发常用js库(效果库、架构库)

    17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    61个时尚网页特效

    jQuery抖动导航菜单效果 jQuery横向向上弹出导航菜单 jquery虚拟桌面图片拖拽 jquery角色左右选择框 jq点评网星级评论 js js+css实现上下翻页相册代码 js+css实现上下翻页相册代码.rar js制作的左侧上下滑动缩略图...

    100多个JQuery效果示例(实例)div+css+javascrpit

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    uniapp实现可滑动选项卡

    本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue &lt;view class=tabList :style=isEquall

    返滴滴打车首页功能,左侧导航NavigationView自定义,底部菜单可上下滑动

    要混排或者横向的就不适用了,因此本人直接去修改源码的布局,把顶部的布局拉伸,底部布局直接不用了,这样布局就可以很灵活了,源码需要修改design_navigation_item_header.xml 中的android:layout_height="wrap_...

    jquery 动态示例

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    101:索尼中国Flash+Xml广告 下载 102:弹性菜单样式的图片展示 下载 103:带摘要的Flash图片代码下载 104:JS图片卷帘门效果下载 105:3d图片墙flash+xml 下载 106:360度旋转展示flash+xml 下载 107:带翻页的JS图片...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    101:索尼中国Flash+Xml广告 下载 102:弹性菜单样式的图片展示 下载 103:带摘要的Flash图片代码下载 104:JS图片卷帘门效果下载 105:3d图片墙flash+xml 下载 106:360度旋转展示flash+xml 下载 107:带翻页的JS图片...

    Axure交互原型Web组件库 完整版v1.rp

    横向时间轴 标签 Tags & Labels 常用标签 特价标签 日历 Calendar 常用日历组件 常用徽章 Badge 常用徽章 表格 Table 动态表格 可编辑表格 默认表格 行内表格 列表表格 无边框表格 列表...

Global site tag (gtag.js) - Google Analytics