android 顶部横向滑动菜单效果

顶部横向滑动菜单效果

博客分类：

 

android进阶

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(0, 5, 0, 5);  

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(), 0, 0);  

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>  

具体看附件

• androidDemo.zip (916.6 KB)

• 下载次数: 304

• 查看图片附件

转载于:https://my.oschina.net/u/2263251/blog/470976