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