android UI设计及开发

一、viewPager实现左右滑动及导引功能

1,如果每个屏幕只是一个简单的布局,如果简单的话,定义一个arraryIist<View>,利用addview将所有的布局加载,

然后为viewpager定义一个adapter。对于页面内部控件的处理事件在instantiateItem中进行处理。

2,如果每一个屏幕的布局,相对复杂的话,可以将其封装为一个类,在这个类中给页面内部对应的组件添加点击事件。

package com.slide.menu;

import java.util.ArrayList;

import com.slide.util.SlideMenuUtil;

import android.app.Activity;
import android.graphics.Color;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; /**
* 顶部滑动菜单布局设置
* @Description: 顶部滑动菜单布局设置 * @FileName: SlideMenuLayout.java * @Package com.slide.menu * @Author Hanyonglu * @Date 2012-4-20 上午11:17:31 * @Version V1.0
*/
public class SlideMenuLayout {
// 包含菜单的ArrayList
private ArrayList<TextView> menuList = null; private Activity activity;
private TextView textView = null;
private SlideMenuUtil menuUtil = null; public SlideMenuLayout(Activity activity){
this.activity = activity;
menuList = new ArrayList<TextView>();
menuUtil = new SlideMenuUtil();
} /**
* 顶部滑动菜单布局
* @param menuTextViews
* @param layoutWidth
*/
public View getSlideMenuLinerLayout(String[] menuTextViews,int layoutWidth){
// 包含TextView的LinearLayout
LinearLayout menuLinerLayout = new LinearLayout(activity);
menuLinerLayout.setOrientation(LinearLayout.HORIZONTAL); // 参数设置
LinearLayout.LayoutParams menuLinerLayoutParames = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT,
1);
menuLinerLayoutParames.gravity = Gravity.CENTER_HORIZONTAL; // 添加TextView控件
for(int i = 0;i < menuTextViews.length; i++){
//形成textview标签<textView>
TextView tvMenu = new TextView(activity); // 设置标识值(menuTextView是从外部传递数值)
tvMenu.setTag(menuTextViews[i]);
//相当于在textview下设置<android:layoutWidth>和<android:layoutHeight>
tvMenu.setLayoutParams(new LayoutParams(layoutWidth / 4,30));
tvMenu.setPadding(30, 14, 30, 10);
tvMenu.setText(menuTextViews[i]);
tvMenu.setTextColor(Color.WHITE);
tvMenu.setGravity(Gravity.CENTER_HORIZONTAL);
tvMenu.setOnClickListener(SlideMenuOnClickListener); // 菜单项计数
menuUtil.count ++; // 设置第一个菜单项背景
if(menuUtil.count == 1){
tvMenu.setBackgroundResource(R.drawable.menu_bg);
} menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
menuList.add(tvMenu);
} return menuLinerLayout;
} // 单个菜单事件,第一更改对应菜单项的背景图片,另一方面将内容布局的内容更改为菜单项对应的布局
OnClickListener SlideMenuOnClickListener = new OnClickListener() { @Override
public void onClick(View v) {
// TODO Auto-generated method stub
String menuTag = v.getTag().toString(); if(v.isClickable()){
textView = (TextView)v;
Log.i("SlideMenu",
"width:" + textView.getWidth() +
"height:" + textView.getHeight()); textView.setBackgroundResource(R.drawable.menu_bg); for(int i = 0;i < menuList.size();i++){
if(!menuTag.equals(menuList.get(i).getText())){
menuList.get(i).setBackgroundDrawable(null);
}
} // 点击菜单时改变内容
slideMenuOnChange(menuTag);
}
}
}; // 点击时改内容,就是首先将内容布局对应的控件全部删除,然后添加需要展现的控件即可
private void slideMenuOnChange(String menuTag){
LayoutInflater inflater = activity.getLayoutInflater();
//下面的内容页面
ViewGroup llc = (ViewGroup)activity.findViewById(R.id.linearLayoutContent);
llc.removeAllViews();
if(menuTag.equals(SlideMenuUtil.ITEM_MOBILE)){
llc.addView(inflater.inflate(R.layout.item_mobile, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_WEB)){
llc.addView(inflater.inflate(R.layout.item_web, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_CLOUD)){
llc.addView(inflater.inflate(R.layout.item_cloud, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DATABASE)){
llc.addView(inflater.inflate(R.layout.item_database, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_EMBED)){
llc.addView(inflater.inflate(R.layout.item_embed, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_SERVER)){
llc.addView(inflater.inflate(R.layout.item_server, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DOTNET)){
llc.addView(inflater.inflate(R.layout.item_dotnet, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_JAVA)){
llc.addView(inflater.inflate(R.layout.item_java, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_SAFE)){
llc.addView(inflater.inflate(R.layout.item_safe, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DOMAIN)){
llc.addView(inflater.inflate(R.layout.item_domain, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_RESEASRCH)){
llc.addView(inflater.inflate(R.layout.item_research, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_MANAGE)){
llc.addView(inflater.inflate(R.layout.item_manage, null));
}
}
}

这样,在viewpager所在的activity,仅仅需要调用getSlideMenuLinerLayout(String[] menuTextViews,int layoutWidth)方法即可,并在这里处理页面滚动事件

package com.slide.menu;

import java.util.ArrayList;

import com.slide.util.SlideMenuUtil;

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.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; /**
* Android实现导航菜单左右滑动效果
*
* @Description: Android实现导航菜单左右滑动效果
*
* @FileName: SlideMenuActivity.java
*
* @Package com.slide.menu
*
* @Author Hanyonglu
*
* @Date 2012-4-20 上午09:15:11
*
* @Version V1.0
*/
public class SlideMenuActivity extends Activity {
/** Called when the activity is first created. */
private String[][] menus = {
{ SlideMenuUtil.ITEM_MOBILE, SlideMenuUtil.ITEM_WEB,
SlideMenuUtil.ITEM_CLOUD, SlideMenuUtil.ITEM_DATABASE },
{ SlideMenuUtil.ITEM_EMBED, SlideMenuUtil.ITEM_SERVER,
SlideMenuUtil.ITEM_DOTNET, SlideMenuUtil.ITEM_JAVA },
{ SlideMenuUtil.ITEM_SAFE, SlideMenuUtil.ITEM_DOMAIN,
SlideMenuUtil.ITEM_RESEASRCH, SlideMenuUtil.ITEM_MANAGE } }; // 当前ViewPager索引
private int pagerIndex = 0;
private ArrayList<View> menuViews = null; private ViewGroup main = null;
private ViewPager viewPager = null;
// 左右导航图片按钮
private ImageView imagePrevious = null;
private ImageView imageNext = null; @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 设置无标题窗口
requestWindowFeature(Window.FEATURE_NO_TITLE);
// 取得窗口属性
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// 窗口的宽度
int screenWidth = dm.widthPixels; LayoutInflater inflater = getLayoutInflater();
menuViews = new ArrayList<View>();
SlideMenuLayout menu = new SlideMenuLayout(this); for (int i = 0; i < menus.length; i++) {
// menuViews为一个集合,arrayList<View>
menuViews.add(menu.getSlideMenuLinerLayout(menus[i], screenWidth));
} main = (ViewGroup) inflater.inflate(R.layout.main, null); setContentView(main);
// 左右导航图片按钮
imagePrevious = (ImageView) findViewById(R.id.ivPreviousButton);
imageNext = (ImageView) findViewById(R.id.ivNextButton);
imagePrevious.setOnClickListener(new ImagePreviousOnclickListener());
imageNext.setOnClickListener(new ImageNextOnclickListener()); if (menuViews.size() > 1) {
imageNext.setVisibility(View.VISIBLE);
} // 菜单背景
// imageMenuBack = (ImageView)findViewById(R.id.ivMenuBackground);
// imageMenuBack.setVisibility(View.INVISIBLE); // 加载移动菜单下内容,llc为主体部分的布局
ViewGroup llc = (ViewGroup) findViewById(R.id.linearLayoutContent);
llc.addView(inflater.inflate(R.layout.item_mobile, null)); viewPager = (ViewPager) main.findViewById(R.id.slideMenu);
viewPager.setAdapter(new SlideMenuAdapter());
viewPager.setOnPageChangeListener(new SlideMenuChangeListener());
} // 滑动菜单数据适配器
class SlideMenuAdapter extends PagerAdapter { @Override
public int getCount() {
// View v =
// menuViews.get(0).findViewWithTag(SlideMenuUtil.ITEM_MOBILE);
// v.setBackgroundResource(R.drawable.menu_bg);
return menuViews.size();
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
} @Override
public void destroyItem(View arg0, int arg1, Object arg2) {
// TODO Auto-generated method stub
((ViewPager) arg0).removeView(menuViews.get(arg1));
} @Override
public Object instantiateItem(View arg0, int arg1) {
// TODO Auto-generated method stub
((ViewPager) arg0).addView(menuViews.get(arg1)); return menuViews.get(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 } @Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub }
} // 滑动菜单更改事件监听器
class SlideMenuChangeListener 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 } @Override
public void onPageSelected(int arg0) {
//agr0代表现在显示的是viewpager的第几个页面
int pageCount = menuViews.size() - 1;
pagerIndex = arg0; // 显示右边导航图片
if (arg0 >= 0 && arg0 < pageCount) {
imageNext.setVisibility(View.VISIBLE);
} else {
imageNext.setVisibility(View.INVISIBLE);
} // 显示左边导航图片
if (arg0 > 0 && arg0 <= pageCount) {
imagePrevious.setVisibility(View.VISIBLE);
} else {
imagePrevious.setVisibility(View.INVISIBLE);
}
}
} // 右导航图片按钮事件
class ImageNextOnclickListener implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pagerIndex++;
viewPager.setCurrentItem(pagerIndex);
}
} // 左导航图片按钮事件
class ImagePreviousOnclickListener implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pagerIndex--;
viewPager.setCurrentItem(pagerIndex);
}
}
}

2,底部菜单栏两种方式实现

3,fragment的用法

上一篇:【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面


下一篇:【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面