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的用法