android-仿美丽说有滑动效果的导航栏
如果大家想要简单点的,也可以参考:http://blog.csdn.net/jdsjlzx/article/details/51560133
效果图:
本文转自:http://blog.csdn.net/swadair/article/details/7487520 请大家多支持原创作者!
这两天看到“美丽说”首页的底部导航栏有一个可以滑动的小红块,觉得很有趣味。于是做了一个具有类似效果的组件RollNavigationBar。
这个组件可以直接用于大家的生产应用,美化成大家想要的样式。比如以前android版QQ的导航栏的滑动效果。
这里我举出RollNavigationBar的一个应用demo,美化成“美丽说”底部导航栏。
美丽说效果图RollNavigationBar组件通过美化实现的美丽说效果图
以下是RollNavigationBar实现美丽说导航栏的源代码。
- package cn.w.song.ui;
- import java.util.HashMap;
- import java.util.LinkedList;
- import java.util.List;
- import java.util.Map;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.ImageView;
- import android.widget.TextView;
- import cn.w.song.widget.navigation.RollNavigationBar;
- import cn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;
- /**
- * 这是RollNavigationBar组件的一个小应用demo, 模仿"美丽说"的底部滑动效果的导航栏
- * 注意将w.song.android.widget-1.0.2.jar包导入本项目。
- * 可以到http://download.csdn.net/detail/swadair/4253236下载
- * @author w.song
- * @version 1.0.1
- * @date 2012-4-22
- */
- public class MeiLiShuoNavigationBarDemoActivityextends Activity {
- private String tag = "MeiLiShuoDNavigationBarDemoActivity";
- private String[] title = { "关注", "热门", "分类", "喜欢", "我" };
- private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,
- R.drawable.nav_menu_category, R.drawable.nav_menu_like,
- R.drawable.nav_menu_me };
- private int[] photoSelected = { R.drawable.nav_menu_home_selected,
- R.drawable.nav_menu_hot_selected,
- R.drawable.nav_menu_category_active,
- R.drawable.nav_menu_like_active, R.drawable.nav_menu_me_selected };
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.meilishuonavigationbardemo_ui);
- RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.navigationbartest_ui_RollNavigationBar);
- /* 定制动态数据 */
- List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();
- for (int i = 0; i < title.length; i++) {
- Map<String, Object> map = new HashMap<String, Object>();
- map.put("title", title[i]);
- map.put("photo", photo[i]);
- map.put("photoSelected", photoSelected[i]);
- list.add(map);
- }
- /* 设置滑动条的滑动时间,时间范围在0.1~1s,不在范围则默认0.1s */
- rnb.setSelecterMoveContinueTime(0.1f);// 可以不设置,默认0.1s
- /* 设置滑动条样式(图片) */
- rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必须
- /* 设置导航栏的被选位置 */
- rnb.setSelectedChildPosition(0);// 可以不设置
- /* 导航栏扩展 */
- final MyNavigationBarAdapter adapter =new MyNavigationBarAdapter(this, list);
- rnb.setAdapter(adapter);// 必须
- rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {
- /**
- * position 被选位置
- * view 为导航栏
- * event 移动事件
- */
- @Override
- public void onNavigationBarClick(int position, View view,
- MotionEvent event) {
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:// 按下去时
- break;
- case MotionEvent.ACTION_MOVE://移动中
- break;
- case MotionEvent.ACTION_UP:// 抬手时
- break;
- }
- }
- });
- }
- /**
- * 导航栏扩展
- *
- * @author w.song
- * @version 1.0.1
- * @date 2012-4-22
- */
- class MyNavigationBarAdapter extends RollNavigationBarAdapter {
- private List<Map<String, Object>> list;
- private LayoutInflater mInflater;
- public MyNavigationBarAdapter(Activity activity,
- List<Map<String, Object>> list) {
- mInflater = LayoutInflater.from(activity);
- this.list = list;
- }
- @Override
- public int getCount() {
- return list.size();
- }
- /**
- * 获取每个组件
- *
- * @param position
- * 组件的位置
- * @param contextView
- * 组件
- * @param parent
- * 上层组件
- */
- @Override
- public View getView(int position, View contextView, ViewGroup parent) {
- mInflater.inflate(R.layout.item, (ViewGroup) contextView);
- RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;
- /* 获取组件 */
- ImageView imageView = (ImageView) contextView
- .findViewById(R.id.image_view);
- TextView titleView = (TextView) contextView
- .findViewById(R.id.title_view);
- /* 获取参数 */
- String title = "" + list.get(position).get("title");
- int photo = (Integer) list.get(position).get("photo");
- int photoSelected = (Integer) list.get(position).get(
- "photoSelected");
- /* 组件设置参数 */
- // 区分选择与被选择图片
- if (position == rollNavigationBar.getSelectedChildPosition()) {//被选择
- imageView.setBackgroundResource(photoSelected);
- } else {//没被选择
- imageView.setBackgroundResource(photo);
- }
- titleView.setText(title);
- return contextView;
- }
- }
- }
package cn.w.song.ui;import java.util.HashMap; import java.util.LinkedList; import java.util.List; import java.util.Map;import android.app.Activity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import cn.w.song.widget.navigation.RollNavigationBar; import cn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;/*** 这是RollNavigationBar组件的一个小应用demo, 模仿"美丽说"的底部滑动效果的导航栏* 注意将w.song.android.widget-1.0.2.jar包导入本项目。* 可以到http://download.csdn.net/detail/swadair/4253236下载* @author w.song* @version 1.0.1* @date 2012-4-22*/ public class MeiLiShuoNavigationBarDemoActivity extends Activity {private String tag = "MeiLiShuoDNavigationBarDemoActivity";private String[] title = { "关注", "热门", "分类", "喜欢", "我" };private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,R.drawable.nav_menu_category, R.drawable.nav_menu_like,R.drawable.nav_menu_me };private int[] photoSelected = { R.drawable.nav_menu_home_selected,R.drawable.nav_menu_hot_selected,R.drawable.nav_menu_category_active,R.drawable.nav_menu_like_active, R.drawable.nav_menu_me_selected };@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.meilishuonavigationbardemo_ui);RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.navigationbartest_ui_RollNavigationBar);/* 定制动态数据 */List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();for (int i = 0; i < title.length; i++) {Map<String, Object> map = new HashMap<String, Object>();map.put("title", title[i]);map.put("photo", photo[i]);map.put("photoSelected", photoSelected[i]);list.add(map);}/* 设置滑动条的滑动时间,时间范围在0.1~1s,不在范围则默认0.1s */rnb.setSelecterMoveContinueTime(0.1f);// 可以不设置,默认0.1s/* 设置滑动条样式(图片) */rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必须/* 设置导航栏的被选位置 */rnb.setSelectedChildPosition(0);// 可以不设置/* 导航栏扩展 */final MyNavigationBarAdapter adapter = new MyNavigationBarAdapter(this, list);rnb.setAdapter(adapter);// 必须rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {/*** position 被选位置* view 为导航栏* event 移动事件*/@Overridepublic void onNavigationBarClick(int position, View view,MotionEvent event) { switch (event.getAction()) {case MotionEvent.ACTION_DOWN:// 按下去时break;case MotionEvent.ACTION_MOVE://移动中break;case MotionEvent.ACTION_UP:// 抬手时 break;}}});}/*** 导航栏扩展* * @author w.song* @version 1.0.1* @date 2012-4-22*/class MyNavigationBarAdapter extends RollNavigationBarAdapter {private List<Map<String, Object>> list;private LayoutInflater mInflater;public MyNavigationBarAdapter(Activity activity,List<Map<String, Object>> list) {mInflater = LayoutInflater.from(activity);this.list = list;}@Overridepublic int getCount() {return list.size();}/*** 获取每个组件* * @param position* 组件的位置* @param contextView* 组件* @param parent* 上层组件*/@Overridepublic View getView(int position, View contextView, ViewGroup parent) {mInflater.inflate(R.layout.item, (ViewGroup) contextView);RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;/* 获取组件 */ImageView imageView = (ImageView) contextView.findViewById(R.id.image_view);TextView titleView = (TextView) contextView.findViewById(R.id.title_view);/* 获取参数 */String title = "" + list.get(position).get("title");int photo = (Integer) list.get(position).get("photo");int photoSelected = (Integer) list.get(position).get("photoSelected");/* 组件设置参数 */// 区分选择与被选择图片if (position == rollNavigationBar.getSelectedChildPosition()) {//被选择imageView.setBackgroundResource(photoSelected);} else {//没被选择imageView.setBackgroundResource(photo);}titleView.setText(title);return contextView;}} }
xml配置文件直接下载demo项目,就不粘贴出来了。
下载 w.song.android.widget-1.0.2.jar
不想复制代码可以直接下载demo这个项目 UseWidgetDemo
在RollNavigationBar的使用过程有任何疑问,可以评论留言,我会尽可能的回复大家的。
w.song.android.widget-1.0.1.jar的下载分数设的有些高,不建议大家下载了。
直接把w.song.android.widget-1.0.2.jar版导入项目即可。
android-仿美丽说有滑动效果的导航栏相关推荐
- android+qq底部界面,Android 高仿QQ 界面滑动效果
Android高仿QQ界面滑动效果 点击或者滑动切换画面,用ViewPager实现, 首先是布局文件: android:layout_width="match_parent" an ...
- 基于android的高仿抖音,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- android仿抖音关注列表,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- Android高仿抖音滚动聊天,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- php 实现tab切换_微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码)...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
- Android仿微信头像放大效果
android仿微信头像放大效果,使用Dialog+Gallery 实现 1. dialog显示时的动画style,动画可以自己根据喜好自己设置,此处动画xml省略 <style name=& ...
- android仿ppt,android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- android仿抖音礼物列表实现,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏
HTML+CSS/CSS3实现滑动下拉导航栏 纯css实现的滑动下拉导航栏,超详细代码,以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式 html代码 css代码 * { margin: ...
最新文章
- 医院选址问题--数据结构课程设计
- 【Android 热修复】运行 Tinker 官方示例 ( 处理 TINKER_ID 问题 | 编译 debug 包 | 修改 Gradle 脚本 | 生成 patch 包 | 热修复 )
- 面试关于ISO七层模型你应该知道的东西
- SVN+post-commit 搭建自动同步版本库
- TCP系列42—拥塞控制—5、Linux中的慢启动和拥塞避免(二)
- Android开源项目分包方式学习(eoe、oschina、github)
- C#系列之{流和序列化}
- jQuery简单易用的网页内容打印插件
- 怎么做软件安全性测试
- CSS从入门到精通——文本与字体样式
- float占多少字节 java,Java语言中,float类型所占存储空间为()个字节。
- 电气器件系列三十三:步进电机驱动器
- 机电工程学院互联网+特色专业17级顶岗实习欢送会​圆满落幕
- 教你如何写四级高分作文!!!大学英语四级常考各种类型作文模板-范文
- 截流式合流制设计流量计算_截流式合流制管渠的水力计算要点
- 原生js+css3实现点击图片正方体旋转展现图片
- 配置无状态IPv6地址自动配置基础实验
- AI耳机要想“复制”智能音箱的爆红,还要迈过哪些坎?
- Excel VBA实现的简单电子病历管理
- 张小庆,在路上-开始(2)第一天上班