android(7) 360界面的实现

浏览数：18 / 时间：2015年06月11日

一.360界面的实现：

看了别人的源码从而又完善了一下，这种界面实现起来还是不麻烦的（要源码的留下邮箱，我给你们发）。

效果图：

主界面：

public class MainActivity extends Activity {
	private ImageView ivOne;
	private ImageView ivTwo;

	private ImageView button1;
	private ImageView button2;
	private ImageView button3;
	private ImageView button4;
	/*
	 * AccelerateInterpolator 在动画开始的时候速率改变比较慢，然后开始加速 BounceInterpolator
	 * 动画结束的时候弹起 DecelerateInterpolator 在动画开始的时候快，然后变慢 。。。
	 */
	// 动画加速
	private Interpolator accelerator = new AccelerateInterpolator();
	// 动画减速
	private Interpolator decelerator = new DecelerateInterpolator();

	private ViewPager vpMain;
	private List<View> views;
     private View viewOne;
     private View viewTwo;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setView();
		initView();
		setListener();
	}

	public void setView() {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
	}

	public void initView() {
		// 页数按钮
		ivOne = (ImageView) findViewById(R.id.viewpager_one);
		ivTwo = (ImageView) findViewById(R.id.viewpager_two);

		button1 = (ImageView) findViewById(R.id.button1);
		button2 = (ImageView) findViewById(R.id.button2);
		button3 = (ImageView) findViewById(R.id.button3);
		button4 = (ImageView) findViewById(R.id.button4);
		// ViewPager
		vpMain = (ViewPager) findViewById(R.id.viewpager_main);

		views = new ArrayList<View>();
        viewOne = View.inflate(this, R.layout.activity_main_one, null);
		views.add(viewOne);
        viewTwo = View.inflate(this, R.layout.activity_mian_two, null);
        
		views.add(viewTwo);

		MyAdapter adapter = new MyAdapter();
		MyListener listener = new MyListener();
		vpMain.setAdapter(adapter);
		// 监听滑动
		vpMain.setOnPageChangeListener(listener);
		
		LinearLayout activity_main_one_layout = (LinearLayout)viewOne.findViewById(R.id.activity_main_one_layout);
		for (int i = 0; i <  activity_main_one_layout.getChildCount(); i++) {
			for(int j = 0 ;j < ((LinearLayout)activity_main_one_layout.getChildAt(i)).getChildCount() ; j++){
				final int ii = i;
				final int jj = j;
				((LinearLayout)activity_main_one_layout.getChildAt(i)).getChildAt(j).setOnClickListener(new View.OnClickListener() {
					@Override
					public void onClick(View arg0) {
						Toast.makeText(MainActivity.this, "第"+ii+"行，第"+jj+"个", Toast.LENGTH_SHORT).show();
					}
				});
			}
		}
	}

	public void setListener() {
		ivOne.setOnClickListener(new ImageViewOnClickListener());
		ivTwo.setOnClickListener(new ImageViewOnClickListener());
		
		button1.setOnClickListener(new ImageViewOnClickListener());
		button2.setOnClickListener(new ImageViewOnClickListener());
		button3.setOnClickListener(new ImageViewOnClickListener());
		button4.setOnClickListener(new ImageViewOnClickListener());
	}

	
	// 点击ImageView,两个页面的切换方法
	private void flipit(View one, View two) {
		final View visible;
		final View invisible;
		// 判断两个view那个是隐藏的，然后切换
		if (one.getVisibility() == View.GONE) {
			visible = two;
			invisible = one;

		} else {
			invisible = two;
			visible = one;

		}
		// 设置动画，以X轴旋转
		ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visible,
				"rotationX", 0f, 90f);
		// 设置时间
		visToInvis.setDuration(500);
		// 设置动画变化速率
		visToInvis.setInterpolator(accelerator);

		final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisible,
				"rotationX", -90f, 0f);
		invisToVis.setDuration(500);
		invisToVis.setInterpolator(decelerator);
		visToInvis.addListener(new AnimatorListenerAdapter() {
			@Override
			public void onAnimationEnd(Animator anim) {
				visible.setVisibility(View.GONE);
				invisToVis.start();
				invisible.setVisibility(View.VISIBLE);
			}
		});
		visToInvis.start();
	}
    //适配器
	class MyAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object obj) {
			return view == obj;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(views.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(views.get(position));
			return views.get(position);
		}

	}
    //滑动监听
	class MyListener implements OnPageChangeListener {
		// 手指操作屏幕的时候发生变化
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		// 在屏幕滚动过程中不断被调用
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		// 手指滑动翻页的时候，滑动的距离够长，手指抬起来就会立即执行这个方法,arg0是页数
		@Override
		public void onPageSelected(int arg0) {
			flipit(ivOne, ivTwo);
		}

	}
    //ImageView监听
	class ImageViewOnClickListener implements View.OnClickListener {
		@Override
		public void onClick(View arg0) {

			switch (arg0.getId()) {
			case R.id.button1:
				Toast.makeText(MainActivity.this, "我要下载", Toast.LENGTH_SHORT)
						.show();
				break;
			case R.id.button2:
				Toast.makeText(MainActivity.this, "我要删除", Toast.LENGTH_SHORT)
						.show();
				break;
			case R.id.button3:
				Toast.makeText(MainActivity.this, "我要设置", Toast.LENGTH_SHORT)
						.show();
				break;
			case R.id.button4:
				Toast.makeText(MainActivity.this, "我要添加", Toast.LENGTH_SHORT)
						.show();
				break;
			case R.id.viewpager_one:
				flipit(ivOne, ivTwo);
				//setCurrentItem选中页数，getCurrentItem返回当前页数
				vpMain.setCurrentItem((vpMain.getCurrentItem() + 1) % views.size());
				break;
			case R.id.viewpager_two:
				flipit(ivOne, ivTwo);
				vpMain.setCurrentItem((vpMain.getCurrentItem() + 1) % views.size());
				break;
			}
		}

	}
}

主界面布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/w6" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:layout_margin="10dp"
        android:paddingLeft="5dp" >

        <LinearLayout
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="8dp"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="哈哈哈哈"
                android:textColor="#aaffffff"
                android:textScaleX="1.2"
                android:textSize="20sp" >
            </TextView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="哈哈哈哈哈哈哈哈"
                android:textColor="#88ffffff"
                android:textSize="15sp" >
            </TextView>
        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:paddingBottom="30dp"
        android:paddingRight="5dp"
        android:paddingTop="60dp" >

        <include
            android:id="@+id/main_sb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            layout="@layout/activity_main_left" />

        <ImageView
            android:id="@+id/viewpager_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/rootblock_main_page_one"
            />

        <ImageView
            android:id="@+id/viewpager_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/rootblock_main_page_two"
            android:visibility="gone" />
    </RelativeLayout>

</RelativeLayout>

左布局：

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

    <ImageView
        android:id="@+id/button1"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:src="@drawable/rootblock_icon_download_bg" />
    <ImageView
        android:id="@+id/button2"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="20dp"
        android:src="@drawable/rootblock_icon_clear_bg" />

    <ImageView
        android:id="@+id/button3"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="20dp"
        android:src="@drawable/rootblock_icon_set_bg" />

    <ImageView
        android:id="@+id/button4"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginTop="20dp"
        android:src="@drawable/rootblock_icon_add_bg" />

</LinearLayout>

第一页view：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="30dp"
    android:orientation="vertical"
    android:id="@+id/activity_main_one_layout" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#000000">
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#000000" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#3399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#3399ff" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#3399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#3399ff" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#953399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#953399ff" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

第二页view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="30dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#FF7F24" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#FF7F24" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#3399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#3399ff" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#3399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#3399ff" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:background="#953399ff" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="110dp"
            android:layout_height="80dp"
            android:layout_marginLeft="5dp"
            android:background="#953399ff" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

drawable：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true" android:drawable="@drawable/rootblock_icon_add"></item>
	<item android:state_pressed="true" android:drawable="@drawable/rootblock_icon_add_selected"></item>
	<item android:state_enabled="true" android:drawable="@drawable/rootblock_icon_add"></item>
</selector>

另外三个xml一样。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

android(7) 360界面的实现