zhengjiong
- 浏览: 71348 次
- 性别:
- 来自: 成都
-
最新评论
-
jasonpeak：
代码能不能贴完全？？？你这是自私的表现，也是装逼的表现。
Android导航菜单横向左右滑动并和下方的控件实现联动 -
zhengjiong：
<div class="quote_title ...
Android导航菜单横向左右滑动并和下方的控件实现联动 -
zhengjiong：
<div class="quote_title ...
Android导航菜单横向左右滑动并和下方的控件实现联动 -
Tristan_S：
应该是这个 for(int i=0;i<N;i++){ ...
ArrayList对比LinkedList -
Tristan_S：
这个是我看过的最能体现LinkedList的例子了， 有个问题 ...
ArrayList对比LinkedList
这个是美团网个人订单的效果,找了很多地方都没找到,自己研究了两天终于弄出来了^_^,有什么问题希望大家指出来,谢谢。
源代码下载 这里有http://www.eoeandroid.com/thread-175041-1-1.html
实现原理是上方使用HorizontalScrollView这个可以水平横向拖动的控件,在其中加入了5个RadioButton;下方使用的是ViewPager,里面加入了7个Layout文件,其中第一个和最后一个为空,是为了实现拖到第一个屏幕的时候还能往外拖动的效果。
先看下效果,切换都是带动画效果的,并且点击上面最右边的标签时会自动滚动出后面的标签。
现在看一下代码:
package com.zj.horizontalsrollview;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.MarginLayoutParams;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
/**
* HorizontalScrollView和ViewPager联动效果
* 上面为HorizontalScrollView,下面为ViewPager
* @author zj
* 2012-5-23 下午1:07:06
*/
public class MainActivity extends Activity implements OnCheckedChangeListener{
private RadioGroup mRadioGroup;
private RadioButton mRadioButton1;
private RadioButton mRadioButton2;
private RadioButton mRadioButton3;
private RadioButton mRadioButton4;
private RadioButton mRadioButton5;
private ImageView mImageView;
private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件
private ViewPager mViewPager; //下方的可横向拖动的控件
private ArrayList<View> mViews;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
iniController();
iniListener();
iniVariable();
mRadioButton1.setChecked(true);
mViewPager.setCurrentItem(1);
mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
}
private void iniVariable() {
// TODO Auto-generated method stub
mViews = new ArrayList<View>();
mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_1, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_2, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_3, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_4, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_5, null));
mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
mViewPager.setAdapter(new MyPagerAdapter());//设置ViewPager的适配器
}
/**
* RadioGroup点击CheckedChanged监听
*/
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
AnimationSet _AnimationSet = new AnimationSet(true);
TranslateAnimation _TranslateAnimation;
Log.i("zj", "checkedid="+checkedId);
if (checkedId == R.id.btn1) {
_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo1), 0f, 0f);
_AnimationSet.addAnimation(_TranslateAnimation);
_AnimationSet.setFillBefore(false);
_AnimationSet.setFillAfter(true);
_AnimationSet.setDuration(100);
/*LayoutParams _LayoutParams1 = new LayoutParams(100, 4);
_LayoutParams1.setMargins(0, 0, 0, 0);
_LayoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);*/
//mImageView.bringToFront();
mImageView.startAnimation(_AnimationSet);//开始上面蓝色横条图片的动画切换
//mImageView.setLayoutParams(_LayoutParams1);
mViewPager.setCurrentItem(1);//让下方ViewPager跟随上面的HorizontalScrollView切换
}else if (checkedId == R.id.btn2) {
_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo2), 0f, 0f);
_AnimationSet.addAnimation(_TranslateAnimation);
_AnimationSet.setFillBefore(false);
_AnimationSet.setFillAfter(true);
_AnimationSet.setDuration(100);
//mImageView.bringToFront();
mImageView.startAnimation(_AnimationSet);
mViewPager.setCurrentItem(2);
}else if (checkedId == R.id.btn3) {
_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo3), 0f, 0f);
_AnimationSet.addAnimation(_TranslateAnimation);
_AnimationSet.setFillBefore(false);
_AnimationSet.setFillAfter(true);
_AnimationSet.setDuration(100);
//mImageView.bringToFront();
mImageView.startAnimation(_AnimationSet);
mViewPager.setCurrentItem(3);
}else if (checkedId == R.id.btn4) {
_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo4), 0f, 0f);
_AnimationSet.addAnimation(_TranslateAnimation);
_AnimationSet.setFillBefore(false);
_AnimationSet.setFillAfter(true);
_AnimationSet.setDuration(100);
//mImageView.bringToFront();
mImageView.startAnimation(_AnimationSet);
mViewPager.setCurrentItem(4);
}else if (checkedId == R.id.btn5) {
_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo5), 0f, 0f);
_AnimationSet.addAnimation(_TranslateAnimation);
_AnimationSet.setFillBefore(false);
_AnimationSet.setFillAfter(true);
_AnimationSet.setDuration(100);
//mImageView.bringToFront();
mImageView.startAnimation(_AnimationSet);
mViewPager.setCurrentItem(5);
}
mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
Log.i("zj", "getCurrentCheckedRadioLeft="+getCurrentCheckedRadioLeft());
Log.i("zj", "getDimension="+getResources().getDimension(R.dimen.rdo2));
mHorizontalScrollView.smoothScrollTo((int)mCurrentCheckedRadioLeft-(int)getResources().getDimension(R.dimen.rdo2), 0);
}
/**
* 获得当前被选中的RadioButton距离左侧的距离
*/
private float getCurrentCheckedRadioLeft() {
// TODO Auto-generated method stub
if (mRadioButton1.isChecked()) {
//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo1));
return getResources().getDimension(R.dimen.rdo1);
}else if (mRadioButton2.isChecked()) {
//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo2));
return getResources().getDimension(R.dimen.rdo2);
}else if (mRadioButton3.isChecked()) {
//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo3));
return getResources().getDimension(R.dimen.rdo3);
}else if (mRadioButton4.isChecked()) {
//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo4));
return getResources().getDimension(R.dimen.rdo4);
}else if (mRadioButton5.isChecked()) {
//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo5));
return getResources().getDimension(R.dimen.rdo5);
}
return 0f;
}
private void iniListener() {
// TODO Auto-generated method stub
mRadioGroup.setOnCheckedChangeListener(this);
mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());
}
private void iniController() {
// TODO Auto-generated method stub
mRadioGroup = (RadioGroup)findViewById(R.id.radioGroup);
mRadioButton1 = (RadioButton)findViewById(R.id.btn1);
mRadioButton2 = (RadioButton)findViewById(R.id.btn2);
mRadioButton3 = (RadioButton)findViewById(R.id.btn3);
mRadioButton4 = (RadioButton)findViewById(R.id.btn4);
mRadioButton5 = (RadioButton)findViewById(R.id.btn5);
mImageView = (ImageView)findViewById(R.id.img1);
mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);
mViewPager = (ViewPager)findViewById(R.id.pager);
}
/**
* ViewPager的适配器
* @author zj
* 2012-5-24 下午2:26:57
*/
private class MyPagerAdapter extends PagerAdapter{
@Override
public void destroyItem(View v, int position, Object obj) {
// TODO Auto-generated method stub
((ViewPager)v).removeView(mViews.get(position));
}
@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mViews.size();
}
@Override
public Object instantiateItem(View v, int position) {
((ViewPager)v).addView(mViews.get(position));
return mViews.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub
}
@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}
@Override
public void startUpdate(View arg0) {
// TODO Auto-generated method stub
}
}
/**
* ViewPager的PageChangeListener(页面改变的监听器)
* @author zj
* 2012-5-24 下午3:14:27
*/
private class MyPagerOnPageChangeListener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
/**
* 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
*/
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
//Log.i("zj", "position="+position);
if (position == 0) {
mViewPager.setCurrentItem(1);
}else if (position == 1) {
mRadioButton1.performClick();
}else if (position == 2) {
mRadioButton2.performClick();
}else if (position == 3) {
mRadioButton3.performClick();
}else if (position == 4) {
mRadioButton4.performClick();
}else if (position == 5) {
mRadioButton5.performClick();
}else if (position == 6) {
mViewPager.setCurrentItem(5);
}
}
}
}
XML文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="50dp"
android:fadingEdge="@null"
android:scrollbars="none"
android:background="#555555"
android:id="@+id/horizontalScrollView"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#33b5e5"
>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="fill_parent"
android:layout_height="49dp"
android:orientation="horizontal"
android:layout_alignParentTop="true"
>
<RadioButton
style="@style/radioButton"
android:text="one"
android:id="@+id/btn1"
/>
<RadioButton
style="@style/radioButton"
android:text="two"
android:id="@+id/btn2"
/>
<RadioButton
style="@style/radioButton"
android:text="three"
android:id="@+id/btn3"
/>
<RadioButton
style="@style/radioButton"
android:text="four"
android:id="@+id/btn4"
/>
<RadioButton
style="@style/radioButton"
android:text="five"
android:id="@+id/btn5"
/>
</RadioGroup>
<ImageView
android:id="@+id/img1"
android:layout_width="100dp"
android:layout_height="4dp"
android:background="#33b5e5"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
第一次写这么多,希望转载的朋友能够尊重作者的劳动成果，加上转载地，谢谢。
http://zhengjiong.iteye.com/blog/1539951
- 大小: 452.1 KB
分享到：
评论
9 楼
jasonpeak
2015-12-11
代码能不能贴完全？？？你这是自私的表现，也是装逼的表现。
8 楼
zhengjiong
2014-04-25
autujuny 写道
请问
如何改变滚动条的颜色呢？
如何改变滚动条的颜色呢？
xml文件里面改
7 楼
zhengjiong
2014-04-25
StartHere2012 写道
,楼主这个演示动画怎么实现的？用qq影音截图的
6 楼
StartHere2012
2013-10-17
,楼主这个演示动画怎么实现的？
5 楼
autujuny
2013-01-28
请问
如何改变滚动条的颜色呢？
如何改变滚动条的颜色呢？
4 楼
石棱子
2012-09-25
源代码导入后运行会报android.support.v4.view.ViewPager ERROR Inflating错。
可以用下面这个链接的方法解决。
http://stackoverflow.com/questions/9831019/updated-sdk-version-getting-classnotfoundexception-android-support-v4-view-vie
可以用下面这个链接的方法解决。
http://stackoverflow.com/questions/9831019/updated-sdk-version-getting-classnotfoundexception-android-support-v4-view-vie
3 楼
zhengjiong
2012-06-28
chen309 写道
楼主，你好，请问style="@style/radioButton" 这个文件是怎么写的？
<style name="radioButton">
<item name="android:layout_width">100dp</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1.0</item>
<item name="android:padding">10dp</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/radiobtn_selector</item>
<item name="android:button">@null</item>
</style>
2 楼
chen309
2012-06-25
楼主，你好，请问style="@style/radioButton" 这个文件是怎么写的？
1 楼
qqqwwweee111
2012-06-10
能提供一份完成代码吗,楼主
发表评论
-
(转)Android的进程与线程 按重要性划分等级的5种进程
2013-10-13 20:32 1163Android系统会尽可能时间长的来维持一个程序的进程，但 ... -
(转)Activity的Launch mode详解 singleTask正解
2013-10-13 19:41 907转自http://hi.baidu.com/amauri33 ... -
(转)Android Intent.FLAG_NEW_TASK详解，包括其他的标记的一些解释
2013-10-13 19:40 808本文大部分参考自 http://blog.csdn.net ... -
(转)通过wifi调试android程序
2012-09-08 09:07 1022数据线丢了，不想花钱去买，在网上看了看，android ... -
(转)Android Service 通知Activity更新界面的方法
2012-05-16 22:01 4461Android的最重要的组件式service和activity ... -
关于Android 获得图片的总结
2012-05-14 16:34 1487//1，已将图片保存到drawable目录下 // ...
相关推荐
本项目"Android项目导航菜单横向左右滑动并和下方的控件实现联动"就是针对这一需求设计的，它实现了侧滑导航菜单与主内容区域的动态联动效果。这种效果常见于许多流行的移动应用中，比如Google Maps和Facebook等。 ...
本文将深入探讨如何利用这两个组件来构建一个横向左右滑动的导航菜单，并且与下方的控件实现联动。 HorizontalScrollView是一个可以容纳多个View的容器，它允许用户水平滚动其内容。在这个场景中，...
在Android应用开发中，创建一个可以横向左右滑动的导航菜单并与下方控件实现联动是一项常见的需求。这种设计能够提供良好的用户体验，使用户能够轻松地浏览和操作不同的功能模块。以下将详细介绍如何实现这一功能。 ...
"导航菜单横向左右滑动并和下方的控件实现联动"的主题，涉及了Android UI设计中的多个关键知识点，包括自定义View、触摸事件处理、布局管理以及组件间的通信。 首先，这个项目的核心在于自定义View。在Android中，...
Android-导航菜单横向左右滑动并和下方的控件实现联动(源码).zip
本示例项目“基于Android的导航菜单横向左右滑动并和下方的控件实现联动”就是一个很好的实例，它展示了如何在Android应用中实现这种高级的UI交互效果。 首先，这个项目的重点在于导航菜单的设计。导航菜单通常是...
这个"Android应用源码导航菜单横向左右滑动并和下方的控件实现联动"的示例，展示了如何实现一种常见但功能丰富的界面设计：侧滑菜单与下方内容区域的联动。以下是对这个源码的主要知识点的详细解释： 1. **侧滑菜单...
这个压缩包"安卓Android源码——导航菜单横向左右滑动并和下方的控件实现联动.zip"提供了一个示例，展示了如何实现一个可横向滑动的导航菜单，并且与下方的控件进行联动。以下是对这个知识点的详细讲解： 1. **...