Android APP首次安装教学引导效果

来源：互联网发布：戴隐形眼镜游泳知乎编辑：程序博客网时间：2024/04/30 18:26

在Android APP第一次安装使用的时候，在当前的界面上做一些引导用户使用的教程，包括指示箭头、文字、图片等。

先上效果图：

第一步：制作蒙板图片放到res/drawable目录下

blacken_overlay.png

my_job_details_tutorial_1.png

my_job_details_tutorial_2.png

第二步：创建布局文件activity_main.xml和my_jobs_details_assert.xml

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/root"    tools:context=".MainActivity" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="10dp"        android:text="@string/hello_world" /></FrameLayout>

my_jobs_details_assert.xml

<?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="wrap_content"    android:orientation="vertical"    android:background="@drawable/blacken_overlay" >        <LinearLayout         android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:orientation="horizontal" >                <View             android:layout_weight="1"            android:layout_width="0dp"            android:layout_height="1dp" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="15dp"            android:paddingTop="40dp"            android:layout_gravity="right"            android:src="@drawable/my_job_details_tutorial_1" />    </LinearLayout>        <LinearLayout         android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="2" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="15dp"            android:paddingTop="35dp"            android:layout_gravity="left"            android:src="@drawable/my_job_details_tutorial_2" />    </LinearLayout></LinearLayout>

这个XML就是显示在Activity上的蒙板，这里根据需求摆放指示剪头、文字、图片

第二步：创建MainActivity.java

package com.example.guide;import com.example.demo.R;import android.os.Bundle;import android.os.Handler;import android.annotation.SuppressLint;import android.app.Activity;import android.app.Fragment;import android.view.KeyEvent;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;@SuppressLint("ValidFragment")public class MainActivity extends Activity {private View rootView;private Fragment detailsAssertFragment;private boolean showAssert = false;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);rootView = findViewById(R.id.root);final Handler mHandler = new Handler();mHandler.postDelayed(new Runnable() {@SuppressLint("NewApi")public void run() {if(rootView.getWidth() > 0){detailsAssertFragment = new MyJobDetailsAssertFragment();getFragmentManager().beginTransaction().add(R.id.root, detailsAssertFragment).commit();}else {mHandler.postDelayed(this, 100);}}}, 500);}public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}    public boolean onKeyUp(int keyCode, KeyEvent event) {if(showAssert && keyCode == KeyEvent.KEYCODE_BACK){hideTheAssert();return true;}    return super.onKeyUp(keyCode, event);    }    @SuppressLint("NewApi")private void hideTheAssert() {    getFragmentManager().beginTransaction().remove(detailsAssertFragment).commit();    showAssert = false;    }@SuppressLint("NewApi")public class MyJobDetailsAssertFragment extends Fragment {        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.my_jobs_details_assert, null);LayoutParams params= new LayoutParams(rootView.getWidth(), rootView.getHeight());view.setLayoutParams(params);view.setOnClickListener(new OnClickListener() {public void onClick(View v) {hideTheAssert();}});showAssert = true;return view;       <span style="white-space:pre"></span> }}}

最后放下完整源码：http://download.csdn.net/detail/caowei410489662/8199309

0 0