android-整体UI设计-（滑动导航栏+滚动页面）

最新推荐文章于 2021-05-25 16:46:58 发布

业余选手

最新推荐文章于 2021-05-25 16:46:58 发布

阅读量611

点赞数

分类专栏： Android 文章标签： Android

Android 专栏收录该内容

165 篇文章 0 订阅

订阅专栏

^过客^

发表于 2013-6-12 08:28:12 浏览（419015）

代码名称：
android-整体UI设计-（滑动导航栏+滚动页面）
代码描述：
很多朋友对RollNavigationBar+SlidePageView如何设计业务界面感到疑惑，今天我专门写了Demo共大家参考。
托管地址：
代码作者：

很多朋友对RollNavigationBar+SlidePageView如何设计业务界面感到疑惑，今天我专门写了Demo共大家参考。效果图如下：

1336569890_8855.jpg (168.96 KB, 下载次数: 11)

下载附件保存到相册

2013-6-12 08:28 上传

页面A

1336569908_7025.jpg (167.55 KB, 下载次数: 11)

下载附件保存到相册

2013-6-12 08:28 上传

页面A滑向页面B中

1336569953_4103.jpg (167.82 KB, 下载次数: 11)

下载附件保存到相册

2013-6-12 08:28 上传

页面B

1336570048_7408.jpg (185.57 KB, 下载次数: 11)

下载附件保存到相册

2013-6-12 08:28 上传

做了个简单的动态效果图

实现源码如下：

[java] view plaincopy

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;
import cn.w.song.widget.scroll.SlidePageView;
import cn.w.song.widget.scroll.SlidePageView.OnPageViewChangedListener;
/**
* 注意确保将w.song.android.widget-1.0.4.jar导入项目
* w.song.android.widget-1.0.4.jar下载地址 http://download.csdn.net/detail/swadair/4289692
* QQ 2636852590
* @author w.song
* @version 1.0.1
* @date 2012-5-9
*/
public class UIADemoActivity extends Activity {
private String tag = "UIADemoActivity";
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};
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};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.uiademo_ui);
/* 获取组件 */
final RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.uiademo_ui_RollNavigationBar);
final SlidePageView spv = (SlidePageView) findViewById(R.id.uiademo_ui_SlidePageView);
/* 定制动态数据 */
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);
map.put("photo", photo);
map.put("photoSelected", photoSelected);
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:// 按下去时
spv.setCurrPagePosition(position);
spv.CurrPageScrollToScreenCenter();
break;
case MotionEvent.ACTION_MOVE:// 移动中
break;
case MotionEvent.ACTION_UP:// 抬手时
break;
}
}
});
/* 滚动页面（正文）监听 */
spv.setOnPageViewChangedListener(new OnPageViewChangedListener() {
@Override
public void OnPageViewChanged(int currPagePosition,
View currPageView) {
rnb.setSelectedChildPosition(currPagePosition);
rnb.refreshView(adapter);
}
});
}
/**
* 导航栏扩展
*
* @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;
}
}
} http://pan.baidu.com/share/link?shareid=32401056&uk=3827648537http://pan.baidu.com/share/link?shareid=32401056&uk=3827648537

w.song.android.widget-1.0.4 (1).jar

2013-6-12 08:25 上传

点击文件名下载附件

33.72 KB, 下载次数: 180

需用到的jar包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。