안드로이드 모방 QQ 위챗 오프닝 내비게이션 및 로그인 인터페이스

8328 단어 범곡 안드로이드 - UI 편
위챗 등 소셜 애플리케이션의 UI 인터페이스에 대해 잘 알고 있다고 믿습니다. 이 UI가 가장 참고할 만한 것은 처음 사용했을 때 제품에 소개된 그림들입니다. 좌우로 슬라이딩하여 조회할 수 있고 마지막에 앱에 들어갈 수 있습니다. 이 효과는 여러 프로젝트에 적용됩니다. 앞으로 앱을 개발하면 반드시 사용할 수 있을 거라고 믿습니다.인터넷상에서도 이런 예를 참고할 수 있지만 다른 사람의 코드를 보면 하나의 일이고 자신이 실제로 하면 또 다른 일이다. 오늘의 이 위챗의 데모는 여러 개의 유사한 인터페이스를 연구한 후에 자신이 손을 써서 실현한 효과이고 상세한 주석(여분이 있지만)을 덧붙여서 나중에 돌이켜 보면 알 수 있다.진정으로 직접 써야만 체득이 더욱 깊어진다. 예에서 그림은 모두 위챗의 APK에서 추출한 것이고 관련된 지식은 ViewPager와Animation에 불과하다.
우선 오프닝 플래시 스크린의 한 인터페이스로handler를 사용하여 이 페이지가 지정한 시간을 제어한 후 점프합니다
                                    
package com.example.weichat.UI;

import com.example.weichat.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

/**        */
public class WelcomeA extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.strat);
		//       run        
		new Handler().postDelayed(new Runnable() {

			@Override
			public void run() {
				Intent intent = new Intent(WelcomeA.this, WhatsnewPagesA.class);
				startActivity(intent);
				WelcomeA.this.finish();
			}
		}, 2000);

 
————————————————————————————————————————————————————————————————
이어서 주요한 부분, 즉 일련의 기능 소개 그림은 주로viewpager가 실현하고 위에 끼워 넣은 작은 원점의 내비게이션도 실현해야 할 효과 중 하나이다.
                                                           
  
package com.example.weichat.UI;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
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.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import com.example.weichat.R;

/** What's new       */
public class WhatsnewPagesA extends Activity {
	/** Viewpager   */
	private ViewPager viewPager;
	private ImageView imageView;
	/**       ，            View */
	private ArrayList pageViews;
	/**     imageview     ，          */
	private ImageView[] imageViews;
	/**       viewgroup */
	private ViewGroup viewPictures;
	/**       viewgroup */
	private ViewGroup viewPoints;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		pageViews = new ArrayList();
		pageViews.add(inflater.inflate(R.layout.viewpager01, null));
		pageViews.add(inflater.inflate(R.layout.viewpager02, null));
		pageViews.add(inflater.inflate(R.layout.viewpager03, null));
		pageViews.add(inflater.inflate(R.layout.viewpager04, null));
		pageViews.add(inflater.inflate(R.layout.viewpager05, null));
		pageViews.add(inflater.inflate(R.layout.viewpager06, null));

		//      ，        
		imageViews = new ImageView[pageViews.size()];
		//     XML       
		viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null);

		viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
		viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);

		//           
		for (int i = 0; i < pageViews.size(); i++) {
			imageView = new ImageView(WhatsnewPagesA.this);
			imageView.setLayoutParams(new LayoutParams(20, 20));
			imageView.setPadding(5, 0, 5, 0);
			//          
			imageViews[i] = imageView;
			//            ，             ，    
			if (i == 0)
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
			else
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_unfocused));
			//  imageviews         
			viewPoints.addView(imageViews[i]);
		}

		setContentView(viewPictures);

		viewPager.setAdapter(new NavigationPageAdapter());
		//  viewpager    ， view        
		viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
	}

	//     view    ，             
	class NavigationPageAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return pageViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		//      Item
		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(pageViews.get(position));
			return pageViews.get(position);
		}

		//     Item
		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager) container).removeView(pageViews.get(position));
		}

	}

	// viewpager    ，   onPageSelected   
	class NavigationPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public void onPageSelected(int position) {
			//                   
			for (int i = 0; i < imageViews.length; i++) {
				//   view           
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
				//           
				if (position != i)
					imageViews[i].setImageDrawable(getResources().getDrawable(
							R.drawable.page_indicator_unfocused));
			}
		}

	}

	//       ，     XML   onClick    ；
	//         activity           ，     ，           ，     
	public void startbutton(View v) {
		Intent intent = new Intent(WhatsnewPagesA.this, WhatsnewAnimationA.class);
		startActivity(intent);
		WhatsnewPagesA.this.finish();
	}

}

—————————————————————————————————————————————————————————————————
 
그 다음은 바로 문을 여는 애니메이션 효과이다. 이 부분은 비교적 간단하다. 각각 두 폭의 그림을 제어하는 이동 애니메이션을 실현하면 된다.
                         
package com.example.weichat.UI;

import com.example.weichat.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

/**           */
public class WhatsnewAnimationA extends Activity {

	private ImageView img_left, img_right;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.whatnew_animation);
		img_left = (ImageView) findViewById(R.id.doorpage_left);
		img_right = (ImageView) findViewById(R.id.doorpage_right);

		//    AnimationSet  
		AnimationSet animLeft = new AnimationSet(true);
		TranslateAnimation transLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				-1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//           
		transLeft.setDuration(2000);
		// anim     AnimationSet   
		animLeft.addAnimation(transLeft);
		animLeft.setFillAfter(true);
		img_left.startAnimation(transLeft);
		transLeft.startNow();
		
		
		
		//    AnimationSet  
		AnimationSet animRight = new AnimationSet(true);
		TranslateAnimation transRight = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//           
		transRight.setDuration(2000);
		// anim     AnimationSet   
		animRight.addAnimation(transRight);
		animRight.setFillAfter(true);
		img_right.startAnimation(transRight);
		transRight.startNow();
		
		new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				Intent intent = new Intent(WhatsnewAnimationA.this, FirstPageA.class);
				startActivity(intent);
				WhatsnewAnimationA.this.finish();
			}
		}, 1000);
	}
	

}

마지막으로 우리의 로그인 인터페이스에 들어가면 간단한 위챗 로그인 레이아웃이고 코드는 붙이지 않는다
                                       
 
OK. 위챗이 처음 사용했을 때 오프닝 기능 소개와 애니메이션을 비교적으로 사용했고 자신을 위해 신제품을 발표할 때 네비게이션 소개로 사용할 수 있다. 모두가 구체적인 요구에 따라 구체적으로 디자인할 수 있지만 대체적인 사고방식은 이렇다.
 
어, 코드 연결은 아래와 같으니 여러분 스스로 다운로드하세요.
http://download.csdn.net/detail/eyu8874521/5503755
JDK 5.0 특성-스 레 드 잠 금 잠 금
JAVA GUI 닫 기 버튼 이 작 동 하지 않 습 니 다(SwingWorker 로 해결)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage