android 的导航界面的设计与实现
在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>translate_right.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: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>zoom_out_exit.xml
<?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);
}
});
}
}
ps:运行结果如图：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！