Android imitation QQ main interface-improved

In my previous blog post, I made the main work of simulating the QQ main interface. Blog address: Android imitation QQ main interface.

 

However, there is another inconspicuous place in that Article. Today we will improve it.

 

Today, we need to create an imageview under the text to implement animation. Let's take a look.

 

When sliding the page, the following imageview slides. Now, let's get started.

1. layout file main. xml

First look at the Code:

<? 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"> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: Background = "# 1685cc" Android: Orientation = "vertical"> <linearlayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: Background = "# 1685cc"> <textview Android: Id = "@ + ID/textview1" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_weight = "1" Android: gravity = "center" Android: text = "Question" Android: textsize = "25sp"/> <textview Android: id = "@ + ID/textview2" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_weight = "1" Android: gravity = "center" Android: TEXT = "original" Android: textsize = "25sp"/> <textview Android: Id = "@ + ID/textview3" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_weight = "1" Android: gravity = "center" Android: text = "Answer" Android: textsize = "25sp"/> </linearlayout> <imageview Android: Id = "@ + ID/imageview1" Android: layout_width = "50dp" Android: layout_height = "6dp" Android: layout_marginleft = "30dip" Android: src = "@ drawable/meitu"/> </linearlayout> <android. support. v4.view. viewpager Android: Id = "@ + ID/viewpager" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "center" Android: layout_weight = "1" Android: Background = "# ff0000"/> </linearlayout>

Compared with the previous article, an imageview is added to the linearlayout that contains three textviews for displaying images. The width and height of the image and the left margin are fixed.

2. Java code for function implementation

Three member variables are added. An int-type currentpage is used to indicate the page currently being displayed. An int-type displaywidth is used to save the screen width and an int-type offset, this variable indicates a width, which is illustrated below:

 

Offset is the width of the textview control minus the width of the image divided by 2, as shown in.

 

The animation is implemented when the current interface changes. There are two sources for interface changes:

1. the user clicks the textview above

2. User sliding Interface

I have to respond to both of these changes.

 

1. Reflect the click of textview In The onclick method of textview:

         @Overridepublic void onClick(View v) {int single=b.getWidth()+offSet*2;if(v.getId()==R.id.textView1){vp.setCurrentItem(0);if(currentPage!=0){TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=0;}if(v.getId()==R.id.textView2){vp.setCurrentItem(1);if(currentPage!=1){TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=1;}if(v.getId()==R.id.textView3){vp.setCurrentItem(2);if(currentPage!=2){TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=2;}}

 

Here, the variable single indicates the length of a moving image. It can be seen that the image width is added with offset * 2, which indicates that the length is the width of a textview. Why not obtain the textview width here? The reason is that there is a width between textview and textview, and the width of textview is not allowed. Determine which textview is clicked, set the current interface, and then implement the animation. If the current page is clicked, no animation is required. If the clicked page is not the current page, it is moved from the current page to the specified page. The first two parameters of the translateanimation animation are the movement of X. After the animation is completed, the imageview will be parked at the last place, so set setfillafter to true.

2. User response when sliding the interface

You can set a listener for viewpager in the method of sliding the interface, which is processed in the onpageselected method.

public void onPageSelected(int arg0) {int single=b.getWidth()+offSet*2;TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);currentPage=arg0;}

In this method, arg0 indicates the interface after sliding. The code here is similar to the above, and an animation is implemented.

 

 

 

The following shows all the code in viewpagerworkactivity:

package com.zhycheng.viewpagerwork;import java.util.ArrayList;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.Display;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {TextView tv1,tv2,tv3;int currentPage=0;ViewPager vp;ArrayList al;Bitmap b;ImageView i;int disPlayWidth,offSet;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        i=(ImageView) findViewById(R.id.imageView1);        Display dis=this.getWindowManager().getDefaultDisplay();        disPlayWidth=dis.getWidth();        b=BitmapFactory.decodeResource(this.getResources(),R.drawable.meitu);        offSet=(disPlayWidth/3-b.getWidth())/2;        tv1=(TextView) findViewById(R.id.textView1);        tv2=(TextView) findViewById(R.id.textView2);        tv3=(TextView) findViewById(R.id.textView3);        vp=(ViewPager) findViewById(R.id.viewpager);        tv1.setOnClickListener(this);        tv2.setOnClickListener(this);        tv3.setOnClickListener(this);        al=new ArrayList();        LayoutInflater li=LayoutInflater.from(this);        al.add(li.inflate(R.layout.zyc1, null));        al.add(li.inflate(R.layout.zyc2, null));        al.add(li.inflate(R.layout.zyc3, null));        PagerAdapter pa=new PagerAdapter(){@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {// TODO Auto-generated method stub((ViewPager)arg0).removeView((View)al.get(arg1));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn al.size();}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager)arg0).addView((View)al.get(arg1), 0);return (View)al.get(arg1);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0==arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}};        vp.setAdapter(pa);        vp.setCurrentItem(0);vp.setOnPageChangeListener(this);            }@Overridepublic void onClick(View v) {int single=b.getWidth()+offSet*2;if(v.getId()==R.id.textView1){vp.setCurrentItem(0);if(currentPage!=0){TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=0;}if(v.getId()==R.id.textView2){vp.setCurrentItem(1);if(currentPage!=1){TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=1;}if(v.getId()==R.id.textView3){vp.setCurrentItem(2);if(currentPage!=2){TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);}currentPage=2;}}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {int single=b.getWidth()+offSet*2;TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);ta.setFillAfter(true);ta.setDuration(200);i.startAnimation(ta);currentPage=arg0;}}

Download project code: Click to download