android Realizes Welcome Interface Effect
- 2021-12-19 07:01:46
- OfStack
Nowadays, many popular softwares have welcome interfaces. Today, we will introduce the production of welcome interfaces under 1. Because the interfaces involve page sliding, we should adopt ViewPager, and the package "android-support-v4.jar" should be introduced under sdk 4.01.
Step 1: main. xml design, where ViewPager is a multi-page display control, button is to display the start button on the last page, android: visibility = "invisible" is to ensure that button is not displayed on other pages, and button is only displayed on the last page. image in the following linearlayout is a dot to show the current page status and total number of pages:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/guide_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>
<Button
android:text=" Begin to experience "
android:id="@+id/startButton"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:visibility="invisible">
</Button>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal" >
<ImageView
android:id="@+id/page0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/page_now" />
<ImageView
android:id="@+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView
android:id="@+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
</LinearLayout>
</FrameLayout>Step 2: Creating MyPagerAdapter inherits PagerAdapter This adapter is relatively simple, as follows:
package com.crtk.adapter;
import java.util.ArrayList;
import android.R;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class PageviewAdapter extends PagerAdapter{
private ArrayList<View> views;
public PageviewAdapter(ArrayList<View> views){
this.views = views;
}
// Page view
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
return views.get(position);
}
@Override
public int getCount() {
return this.views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}
@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub
}
@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
}
}Step 3: Write Activity as follows:
package com.crtk.main;
import java.util.ArrayList;
import java.util.List;
import com.crtk.adapter.PageviewAdapter;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class GuideActivity extends Activity implements OnPageChangeListener{
static final int PAGE_NUM = 3;// Welcome interface altogether 3 Page
private ArrayList<View> views;// Save viewpager Each of view
private ViewPager viewPager;
private LayoutInflater inflater;
private ImageView []dots; // Array of dots
private Intent intent ;
private Button startButton;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
inflater = LayoutInflater.from(this);
intent = new Intent(GuideActivity.this, MainActivity.class);
// Initialization page
initPage();
// Initialize the dot. . .
initDots();
}
private void initPage(){
views = new ArrayList<View>();
//guide_01,guide_02 , guide_03 For 3 Welcome page, add it views Array
views.add(inflater.inflate(R.layout.guide_01, null));
views.add(inflater.inflate(R.layout.guide_02, null));
views.add(inflater.inflate(R.layout.guide_03, null));
PageviewAdapter pageAdapter = new PageviewAdapter(views);
viewPager = (ViewPager)findViewById(R.id.guide_viewpager);
// Binding adapter
viewPager.setAdapter(pageAdapter);
// Important! ! ! Binding pageseleted Equal function
viewPager.setOnPageChangeListener(this);
// Bind the start key and start using it only at the end 1 Page button To display
startButton = (Button)findViewById(R.id.startButton);
startButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
GuideActivity.this.startActivity(intent); // Jump activity
GuideActivity.this.finish();
}
});
}
private void initDots(){
dots = new ImageView[3];// Bottom small circle dot array
//View guidePage = (View)findViewById();
dots[0] = (ImageView) findViewById(R.id.page0);
dots[1] = (ImageView) findViewById(R.id.page1);
dots[2] = (ImageView) findViewById(R.id.page2);
}
@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) {
// TODO Auto-generated method stub
System.out.println("the page now is " + arg0);
dots[arg0].setImageDrawable(getResources().getDrawable(R.drawable.page_now));
// Selected pages set small dots as bright spots and the rest as dark dots
for (int i = 0; i < 3 ;i ++)
{
if (i == arg0) {continue;}
else
{
dots[i].setImageDrawable(getResources().getDrawable(R.drawable.page));
}
}
// If you switch to the last 1 Page, display start button , the rest are hidden
if(arg0 == PAGE_NUM -1)
{
startButton.setVisibility(View.VISIBLE);//.setVisibility();
}
}
}Others: The above is just a simple implementation of the welcome interface. Some blog suggest that button should be placed in viewpager at the beginning of the last page. It is not very easy for me to try it once. If the functional requirements are not particularly high, the above practice is quite simple.