Android仿QQ主界面-------完善篇
来源:互联网 发布:周杰伦 四面楚歌 知乎 编辑:程序博客网 时间:2024/05/01 08:48
在我前面的博文中,做出了仿QQ主界面的主要工作,博文地址:Android仿QQ主界面。
但是在那一篇中还有一个不起眼的地方没做,今天就完善它。
今天要实现在文字下面来个ImageView,实现动画。先看看效果图。
在滑动页面的时候,下面的ImageView会滑动。好了,开始正题。
1.布局文件main.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="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="试题" 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="原文" 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="解答" 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>
与上篇文章相比,在包含三个TextView的LinearLayout下面加了一个ImageView,用于显示图片。图片的宽和高以及左边距都是固定的。
2.功能实现的Java代码
加了三个成员变量,一个int类型的currentPage用于标示当前正在显示那个页面,一个int类型的disPlayWidth用于保存屏幕的宽度,还有一个int类型的offSet,这个变量标示的是一个宽度,下面作图说明:
offSet就是TextView控件的宽度减去图片的宽度除以2,如上图所示。
实现动画的原理就是当当前的界面发生改变就实现动画。界面的改变有两个来源
1.用户点击上面的TextView
2.用户滑动界面
我必须对这两种的改变都做出反应。
1.对TextView的点击做出反应在TextView的onClick方法中:
@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;}}
在这里,变量single表示移动一次的长度,从图中可以看出是图片的宽度加上offSet*2,这表示这个长度就是一个TextView的宽度。在这里为什么不获取TextView的宽度呢?原因是TextView与TextView之间是有宽度的,直接使用TextView的宽度的话不准。然后判断是哪一个TextView被点击了,再设置当前的界面,接着实现动画。如果点击的是当前的页面则不用实现动画,如果点击的页面不是当前的页面则从当前页面移动到指定的页面。TranslateAnimation动画的前两个参数是X方向的移动。动画完成后ImageView要停在最后的地点,所以要设置setFillAfter为true。
2.用户滑动界面时的反应
用户滑动界面的方法要对ViewPager设置监听,在onPageSelected方法中处理。
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;}
在这个方法中的arg0是滑动之后的那个界面的标示。这里的代码与上面的差不多,还是实现一个动画。
下面贴出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;}}
工程代码下载:点击下载
- Android仿QQ主界面-------完善篇
- Android仿QQ主界面-------完善篇
- Android仿QQ主界面-------完善篇
- Android仿QQ主界面-------完善篇
- Android仿QQ主界面
- Android仿QQ主界面
- android 仿QQ界面
- Android 仿QQ主界面 Fragment + FrameLayout
- android-仿QQ界面布局
- android仿QQ登录界面
- Android仿qq登陆界面
- Android 仿QQ消息界面
- 高仿QQ(主界面)
- 高仿QQ主界面
- Android应用经典主界面框架之一:仿QQ
- android 使用ViewDragHelper高仿QQ主界面效果
- Android界面篇【仿QQ的滑动Tab】
- Android 高仿QQ 登陆界面
- Linux文件编程(系统调用1)
- LeetCode: Merge Intervals
- Hadoop入门
- 下一代信息推荐系统的算法设计与性能评估
- shell语法
- Android仿QQ主界面-------完善篇
- 解决线程中的数据被外部修改导致程序崩溃问题
- [Leetcode] Gray Code
- 简单配色方案web
- QWebView的setContent中文乱码问题
- const用法详解
- C#程序设计入门与实例代码
- bee
- 我的编译文件