android-全体UI設計-(スライドガイドバー+スクロールページ)

5361 ワード

回る友達はブログの住所を残してください.http://blog.csdn.net/swadair/article/details/7551609
多くの友達がRollNavigationBar+SlidePageViewの業務インタフェースをどうやって設計するかに疑問を感じています.今日はDemoを専門に書きました.効果図は以下の通りです
ページAページAをページBにスライドさせ、簡単な動的効果図を作成しました.
実現ソースは以下の通りです.

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> list = new LinkedList>();
		for (int i = 0; i < title.length; i++) {
			Map map = new HashMap();
			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://     
					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> list;
		private LayoutInflater mInflater;

		public MyNavigationBarAdapter(Activity activity,
				List> 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://download.csdn.net/detail/swadair/4289766
注意デモプロジェクトは必ずw.song.android.widget-1.0.4.jarパッケージを導入します.
w.song.android.widget.jarは1.0.4バージョンを持っています.このバージョンはコンポーネントが追加されていませんが、既存のコンポーネントに最適化されました.
w.song.android.widget-1.0.4.jarダウンロードアドレスhttp://download.csdn.net/detail/swadair/4289692

js禁止事件発泡e.stopPropopopopopopopopopgation()