Android imitation QQ Main Interface

Document directory

• 1. First Use the Google additional library
• 2. xml layout File
• 3. Code in the main activity

Qq of Android uses viewpager to implement the tabhost interface, but its function is better than that of tabhost, because it can implement interface switching by hand sliding. QQ's

:

 

 

 

 

 

 

Here I will achieve this effect

Download project: Click to download

1. First Use the Google additional library

Android-support-v4.jar, this library, click to download.

2. xml layout File

<? 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 = "# ffffff"> <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> <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>

This layout is not difficult at all.

Below is the View Shown in viewpager, which is an XML layout. I only paste one layout, three in total.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FF0000"    android:orientation="vertical" >    </LinearLayout>

The other two are green and blue respectively.

3. Code in the main activity

Textview TV1, TV2, TV3;
Viewpager VP;
Arraylist al;

This is a member variable of the activity. The three textviews are the above labels, and the VP is viewpager. Al stores the Layout View in viewpager.

Below is all the code

package com.zhycheng.viewpagerwork;import java.util.ArrayList;import android.app.Activity;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.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {TextView tv1,tv2,tv3;ViewPager vp;ArrayList al;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        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) {if(v.getId()==R.id.textView1){vp.setCurrentItem(0);}if(v.getId()==R.id.textView2){vp.setCurrentItem(1);}if(v.getId()==R.id.textView3){vp.setCurrentItem(2);}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}}

Several Methods in onpagechangelistener are listener when viewpager's view changes. In these methods, viewpager events can be processed. The following figure shows the running result:

It is very similar. In fact, we can change the font size and color of the title when the viewpager view sounds changed. This is easy to implement. It is implemented in the listener. By the way, there is an imageview between the title and viewpager on the QQ page, and there is an animation effect when switching the viewpager content. I didn't do this. It is not difficult to do this, because you do not have to do this for my needs. All items are subject to requirements.