透明UI设计

来源:互联网 发布:ios编程思维游戏 编辑:程序博客网 时间:2024/06/10 18:02

之前学习java和android时,在app市场,找到一个不错的学习软件Java学习手册、Android学习手册,挺喜欢它的那个透明的UI设计

现仿照它自己做了一个,加深自己的功力。



这个App一共用到以下几种功能:
1.GridView 九宫格(显示item)
2.ViewPage+Fragment(经典的滑动切换菜单)
3.ObjectAnimator 动画(控制page图标切换)
4.TranslateAnimation 横移动画(控制主layout的移动)
5.DrawerLayout  v4包自带抽屉功能(即侧滑菜单,但主layout不会移动),配合上面的TranslateAnimation实现主+副一起移动


主Activity代码:

package com.example.xin_test_alphaviewpage;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ObjectAnimator;import android.opengl.Visibility;import android.os.Bundle;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.widget.DrawerLayout;import android.support.v4.widget.DrawerLayout.DrawerListener;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.TranslateAnimation;import android.view.Display;import android.view.Gravity;import android.view.MenuItem;import android.view.Window;import android.view.WindowManager;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;public class MainActivity extends FragmentActivity {private ViewPager mViewPager;// 多页面划动视图private ViewPagerAdapter mViewPagerAdapter;// 设置自定义ViewPager的适配器private Fragment1 mFragment2 = new Fragment1();private Fragment2 mFragment3 = new Fragment2();private ImageView iv_main_page;ObjectAnimator anim,anim1;private ImageButton btn_arrow;private boolean isClickArrow = false;private boolean isOpen = false;private DrawerLayout mDrawerLayout;// 总布局private RelativeLayout relLay_menu;// 主布局private LinearLayout linLay_menu;// 分布局private ActionBarDrawerToggle mDrawerToggle;private int x = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);// 设置全屏requestWindowFeature(Window.FEATURE_NO_TITLE);// 去除标题栏setContentView(R.layout.activity_main);setUpViewPager();// 三个布局对象mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLay);relLay_menu = (RelativeLayout) findViewById(R.id.relLay_menu);linLay_menu = (LinearLayout) findViewById(R.id.linLay_menu);//mDrawerToggle抽栖用来控制开关的对象,参数固定,暂不知道有啥用,照写就是mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */mDrawerLayout, /* DrawerLayout object */R.drawable.ic_launcher, /* nav drawer image to replace 'Up' caret */R.string.drawer_open, /* "open drawer" description for accessibility */R.string.drawer_close /* "close drawer" description for accessibility */) {@Overridepublic void onDrawerStateChanged(int newState) {super.onDrawerStateChanged(newState);System.out.println("Changed="+newState);if(newState==2){if(!isOpen){isOpen = true;TranslateAnimation animation = new TranslateAnimation(x,-linLay_menu.getWidth(), 0, 0);animation.setDuration(500);animation.setFillAfter(true);relLay_menu.startAnimation(animation);x = -linLay_menu.getWidth();}else {isOpen = false;isClickArrow = false;btn_arrow.setImageResource(R.drawable.menu_left);TranslateAnimation animation = new TranslateAnimation(x,0, 0, 0);animation.setDuration(100);animation.setFillAfter(true);relLay_menu.startAnimation(animation);x = 0;}}}};mDrawerLayout.setDrawerListener(mDrawerToggle);        final Display display = getWindowManager().getDefaultDisplay();iv_main_page = (ImageView) findViewById(R.id.iv_main_page);//启动两个动画的用意:使page图标转动起来更好看,不用转完再换图片,不美观anim = ObjectAnimator.ofFloat(iv_main_page, "rotationY", 0f, 90f);anim1 = ObjectAnimator.ofFloat(iv_main_page, "rotationY", 90f, 360f);btn_arrow = (ImageButton) findViewById(R.id.btn_arrow);btn_arrow.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (!isClickArrow) {System.out.println("false");btn_arrow.setImageResource(R.drawable.menu_right);isClickArrow = true;mDrawerLayout.openDrawer(linLay_menu);}}});}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {System.out.println("aaaaaaaaa");return super.onOptionsItemSelected(item);}//private DrawerListener mDrawerListener = new DrawerListener() {////@Override//public void onDrawerClosed(View arg0) {//System.out.println("1111111111111");//invalidateOptionsMenu();//}////@Override//public void onDrawerOpened(View arg0) {//System.out.println("2222222222");//invalidateOptionsMenu();////}////@Override//public void onDrawerSlide(View arg0, float arg1) {//System.out.println("33333333333333");//invalidateOptionsMenu();////}////@Override//public void onDrawerStateChanged(int arg0) {//System.out.println("44444444444444");//invalidateOptionsMenu();////}//};private void setUpViewPager() {// 创建FragmentPagerAdapter对象,通过内部类mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());mViewPager = (ViewPager) findViewById(R.id.pager);mViewPager.setAdapter(mViewPagerAdapter);// 绑定适配器mViewPager// 对ViewPager设置监听器,监听划动到哪一个Fragment时,哪一个图标就高亮显示,否则暗色.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {@Overridepublic void onPageSelected(int position) {if (position == 0) {anim.setDuration(500).start();anim1.addListener(new AnimatorListenerAdapter() {public void onAnimationStart(Animator animation) {iv_main_page.setImageResource(R.drawable.main_page_one);};});anim1.setDuration(1000).start();} else if (position == 1){anim.setDuration(500).start();anim1.addListener(new AnimatorListenerAdapter() {public void onAnimationStart(Animator animation) {iv_main_page.setImageResource(R.drawable.main_page_two);};});anim1.setDuration(1000).start();}}});}// 自定义adapterpublic class ViewPagerAdapter extends FragmentPagerAdapter {public ViewPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {switch (position) {case 0:return mFragment2;case 1:return mFragment3;}throw new IllegalStateException("No fragment at position "+ position);}@Overridepublic int getCount() {return 2;}}}



源码请去本人CSDN资源页面下载,地址:http://download.csdn.net/detail/bilichen006/9379535

作者:天龙
时间:2015.12.26
本APP中很多图片都取自网络,谢谢大家!

1 0
原创粉丝点击