android 的导航界面的设计与实现
- - CSDN博客推荐文章 在android的app中,每个应用在第一次安装使用的时候,都会出现一个导航界面,接着呢,这个导航界面就不在出现了,自己呢,在别人的基础上实现了一个NavigationDemoActivity,这个具体实现过程如下:. android:text="开始历程". 以及一些开门动画效果的实现布局.
在android的app中,每个应用在第一次安装使用的时候,都会出现一个导航界面,接着呢,这个导航界面就不在出现了,自己呢,在别人的基础上实现了一个NavigationDemoActivity,这个具体实现过程如下:
首先看看布局的实现
导航界面的布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainRLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#000000" > <com.nyist.wj.navigation.MyScrollLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ScrollLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="visible" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation1" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation2" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation3" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation4" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation5" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation6" > </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/navigation7" > <Button android:id="@+id/startBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_gravity="center_vertical" android:layout_marginBottom="160dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:background="@drawable/bg_btn" android:text="开始历程" android:textColor="#FFFFFF" android:textSize="18sp" /> </RelativeLayout> </com.nyist.wj.navigation.MyScrollLayout> <LinearLayout android:id="@+id/llayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="24.0dip" android:orientation="horizontal" android:visibility="visible" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5.0dip" android:src="@drawable/page_indicator_bg" /> </LinearLayout> <LinearLayout android:id="@+id/animLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" > <LinearLayout android:id="@+id/leftLayout" android:layout_width="wrap_content" android:layout_height="fill_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/whatsnew_left" /> </LinearLayout> <LinearLayout android:id="@+id/rightLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/whatsnew_right" /> </LinearLayout> </LinearLayout> </RelativeLayout>
非第一次动画效果的布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:id="@+id/startimage" android:layout_width="match_parent" android:layout_height="fill_parent" android:src="@drawable/logo" /> </LinearLayout>
translate_left.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" > <translate android:duration="4000" android:fromXDelta="0.0" android:fromYDelta="0.0" android:toXDelta="-50.0%p" android:toYDelta="0.0" /> </set>
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" > <translate android:duration="4000" android:fromXDelta="0.0" android:fromYDelta="0.0" android:toXDelta="50.0%p" android:toYDelta="0.0" /> </set>zoom_out_enter.xml
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/overshoot_interpolator" > <scale android:duration="@android:integer/config_shortAnimTime" android:fromXScale="0.7" android:fromYScale="0.7" android:pivotX="50.0%" android:pivotY="50.0%" android:toXScale="1.0" android:toYScale="1.0" /> </set>
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <scale android:duration="@android:integer/config_shortAnimTime" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50.0%" android:pivotY="50.0%" android:toXScale="0.8" android:toYScale="0.8" /> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set>
NavigationDemoActivity
package com.nyist.activity; import com.nyist.wj.navigation.MyScrollLayout; import com.nyist.wj.navigation.OnViewChangeListener; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.Animation.AnimationListener; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; public class NavigationDemoActivity extends Activity implements OnViewChangeListener { private MyScrollLayout mScrollLayout; private ImageView[] imgs; private int count; private int currentItem; private Button startBtn; private RelativeLayout mainRLayout; private LinearLayout pointLLayout; private LinearLayout leftLayout; private LinearLayout rightLayout; private LinearLayout animLayout; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.navigation); navigation(); } private void navigation() { mScrollLayout = (MyScrollLayout) findViewById(R.id.ScrollLayout); pointLLayout = (LinearLayout) findViewById(R.id.llayout); mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout); startBtn = (Button) findViewById(R.id.startBtn); startBtn.setOnClickListener(onClick); animLayout = (LinearLayout) findViewById(R.id.animLayout); leftLayout = (LinearLayout) findViewById(R.id.leftLayout); rightLayout = (LinearLayout) findViewById(R.id.rightLayout); count = mScrollLayout.getChildCount(); imgs = new ImageView[count]; for(int i = 0; i< count;i++) { imgs[i] = (ImageView) pointLLayout.getChildAt(i); imgs[i].setEnabled(true); imgs[i].setTag(i); } currentItem = 0; imgs[currentItem].setEnabled(false); mScrollLayout.SetOnViewChangeListener(this); } private View.OnClickListener onClick = new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId()) { case R.id.startBtn: mScrollLayout.setVisibility(View.GONE); pointLLayout.setVisibility(View.GONE); animLayout.setVisibility(View.VISIBLE); // mainRLayout.setBackgroundResource(R.drawable.bg); Animation leftOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_left); Animation rightOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_right); leftLayout.setAnimation(leftOutAnimation); rightLayout.setAnimation(rightOutAnimation); leftOutAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { // mainRLayout.setBackgroundColor(R.color.black); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { leftLayout.setVisibility(View.GONE); rightLayout.setVisibility(View.GONE); Intent intent = new Intent(NavigationDemoActivity.this,TestAcitivity.class); NavigationDemoActivity.this.startActivity(intent); NavigationDemoActivity.this.finish(); overridePendingTransition(R.anim.zoom_out_enter, R.anim.zoom_out_exit); } }); break; } } }; @Override public void OnViewChange(int position) { setcurrentPoint(position); } private void setcurrentPoint(int position) { if(position < 0 || position > count -1 || currentItem == position) { return; } imgs[currentItem].setEnabled(true); imgs[position].setEnabled(false); currentItem = position; } }
还有自定义MyScrollLayout
package com.nyist.wj.navigation; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.ViewGroup; import android.view.View.MeasureSpec; import android.widget.Scroller; public class MyScrollLayout extends ViewGroup { private static final String TAG = "ScrollLayout"; private VelocityTracker mVelocityTracker; // 鐢ㄤ簬鍒ゆ柇鐢╁姩鎵嬪娍 private static final int SNAP_VELOCITY = 600; private Scroller mScroller; // 婊戝姩鎺у埗 private int mCurScreen; private int mDefaultScreen = 0; private float mLastMotionX; // private int mTouchSlop; // private static final int TOUCH_STATE_REST = 0; // private static final int TOUCH_STATE_SCROLLING = 1; // private int mTouchState = TOUCH_STATE_REST; private OnViewChangeListener mOnViewChangeListener; public MyScrollLayout(Context context) { super(context); // TODO Auto-generated constructor stub init(context); } public MyScrollLayout(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub init(context); } public MyScrollLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub init(context); } private void init(Context context) { mCurScreen = mDefaultScreen; // mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); mScroller = new Scroller(context); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub if (changed) { int childLeft = 0; final int childCount = getChildCount(); for (int i=0; i<childCount; i++) { final View childView = getChildAt(i); if (childView.getVisibility() != View.GONE) { final int childWidth = childView.getMeasuredWidth(); childView.layout(childLeft, 0, childLeft+childWidth, childView.getMeasuredHeight()); childLeft += childWidth; } } } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); final int width = MeasureSpec.getSize(widthMeasureSpec); final int widthMode = MeasureSpec.getMode(widthMeasureSpec); final int count = getChildCount(); for (int i = 0; i < count; i++) { getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec); } scrollTo(mCurScreen * width, 0); } public void snapToDestination() { final int screenWidth = getWidth(); final int destScreen = (getScrollX()+ screenWidth/2)/screenWidth; snapToScreen(destScreen); } public void snapToScreen(int whichScreen) { // get the valid layout page whichScreen = Math.max(0, Math.min(whichScreen, getChildCount()-1)); if (getScrollX() != (whichScreen*getWidth())) { final int delta = whichScreen*getWidth()-getScrollX(); mScroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta)*2); mCurScreen = whichScreen; invalidate(); // Redraw the layout if (mOnViewChangeListener != null) { mOnViewChangeListener.OnViewChange(mCurScreen); } } } @Override public void computeScroll() { // TODO Auto-generated method stub if (mScroller.computeScrollOffset()) { scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); postInvalidate(); } } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub final int action = event.getAction(); final float x = event.getX(); final float y = event.getY(); switch (action) { case MotionEvent.ACTION_DOWN: Log.i("", "onTouchEvent ACTION_DOWN"); if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); mVelocityTracker.addMovement(event); } if (!mScroller.isFinished()){ mScroller.abortAnimation(); } mLastMotionX = x; break; case MotionEvent.ACTION_MOVE: int deltaX = (int)(mLastMotionX - x); if (IsCanMove(deltaX)) { if (mVelocityTracker != null) { mVelocityTracker.addMovement(event); } mLastMotionX = x; scrollBy(deltaX, 0); } break; case MotionEvent.ACTION_UP: int velocityX = 0; if (mVelocityTracker != null) { mVelocityTracker.addMovement(event); mVelocityTracker.computeCurrentVelocity(1000); velocityX = (int) mVelocityTracker.getXVelocity(); } if (velocityX > SNAP_VELOCITY && mCurScreen > 0) { // Fling enough to move left Log.e(TAG, "snap left"); snapToScreen(mCurScreen - 1); } else if (velocityX < -SNAP_VELOCITY && mCurScreen < getChildCount() - 1) { // Fling enough to move right Log.e(TAG, "snap right"); snapToScreen(mCurScreen + 1); } else { snapToDestination(); } if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } // mTouchState = TOUCH_STATE_REST; break; } return true; } // // public boolean onInterceptTouchEvent(MotionEvent ev) { // // TODO Auto-generated method stub // final int action = ev.getAction(); // if ((action == MotionEvent.ACTION_MOVE) // && (mTouchState != TOUCH_STATE_REST)) { // Log.i("", "onInterceptTouchEvent return true"); // return true; // } // final float x = ev.getX(); // final float y = ev.getY(); // switch (action) { // case MotionEvent.ACTION_MOVE: // final int xDiff = (int) Math.abs(mLastMotionX - x); // if (xDiff > mTouchSlop) { // mTouchState = TOUCH_STATE_SCROLLING; // } // break; // // case MotionEvent.ACTION_DOWN: // mLastMotionX = x; // // mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST // : TOUCH_STATE_SCROLLING; // break; // // case MotionEvent.ACTION_CANCEL: // case MotionEvent.ACTION_UP: // mTouchState = TOUCH_STATE_REST; // break; // } // // if (mTouchState != TOUCH_STATE_REST) // { // Log.i("", "mTouchState != TOUCH_STATE_REST return true"); // } // // // return mTouchState != TOUCH_STATE_REST; // } private boolean IsCanMove(int deltaX) { if (getScrollX() <= 0 && deltaX < 0 ) { return false; } if (getScrollX() >= (getChildCount() - 1) * getWidth() && deltaX > 0) { return false; } return true; } public void SetOnViewChangeListener(OnViewChangeListener listener) { mOnViewChangeListener = listener; } }
package com.nyist.wj.navigation; public interface OnViewChangeListener { public void OnViewChange(int view); }
最后呢,还有一个活动,用来处理是否是第一次安装这个应用,然后根据条件进行判断
startAnimation
package com.nyist.activity; import junit.framework.Test; import android.app.Activity; import android.content.Intent; import android.content.SharedPreferences; import android.content.SharedPreferences.Editor; import android.os.Bundle; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.view.View.OnClickListener; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.widget.ImageView; public class startAnimation extends Activity{ ImageView startimage; AlphaAnimation startAnimation; private SharedPreferences preferences; protected void onCreate(Bundle savedInstanceState) { // 去除标题 this.requestWindowFeature(Window.FEATURE_NO_TITLE); // 取消状态栏,充满全屏 this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); super.onCreate(savedInstanceState); setContentView(R.layout.startimage); firststartActivity(); startanimation(); } public void firststartActivity() { preferences = getSharedPreferences("count", MODE_WORLD_READABLE); int count = preferences.getInt("count", 0); // 判断程序与第几次运行,如果是第一次运行则跳转到引导页面 if (count == 0) { Intent intent = new Intent(); intent.setClass(getApplicationContext(),NavigationDemoActivity.class); startActivity(intent); finish(); } Editor editor = preferences.edit(); // 存入数据 editor.putInt("count", ++count); // 提交修改 editor.commit(); } public void startanimation(){ startimage = (ImageView) findViewById(R.id.startimage); // 设置动画的渐变效果逐渐增强 startAnimation = new AlphaAnimation(0.5f, 1.0f); // 设置动画显示的时间为3s startAnimation.setDuration(3000); // 开始动画效果 startimage.startAnimation(startAnimation); // 为动画效果设置监听事件 startAnimation.setAnimationListener(new AnimationListener() { // ka开始 @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } // 重复 @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } // 动画结束 @Override public void onAnimationEnd(Animation animation) { // 声明一个意图,启动一个新的Activity Intent intent = new Intent(startAnimation.this, TestAcitivity.class); // 启动新的Activity startActivity(intent); } }); startimage.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Intent intent = new Intent(startAnimation.this, TestAcitivity.class); // 启动新的Activity startActivity(intent); } }); } }