最終效果圖
2017-09-20-02mzZzzz.gif
思路:
打開QQ之后我個人感覺,QQ的側(cè)滑欄和系統(tǒng)的一個控件很像,但是由于好奇所以試了一下,感覺近乎完美
1.有兩個FrameLayout,一個測量時是全屏幕(中間的),一個測量時是半邊屏根據(jù)QQ的滑動初步判斷為1/5,所以獲取當(dāng)前屏幕寬度在除以5[左邊控件寬 = 屏幕寬度 - 屏幕寬度 / 5],就能得到左邊控件所要的寬度,然后使用FragmeLayout的setTranslationX();來移動當(dāng)前控件的X位置
全部代碼
package com.example.downlist.view;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.Scroller;
/**
* Created by Administrator on 2017/9/15.
*/
//仿QQ側(cè)邊欄
public class QQLiftView extends FrameLayout {
private int startX;
private int mid = 0;
private FrameLayout midF;
private FrameLayout liftF;
//記錄相加的值
private int size;
//防止越界的值
private int right1;
private Scroller scroller;
private int weiht;
private int liftIntWight;
private int liftIntWight_;
public QQLiftView(Context context) {
super(context);
initView(context);
}
public QQLiftView(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public QQLiftView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
public void initView(Context context) {
scroller = new Scroller(context);
}
@Override
public void computeScroll() {
super.computeScroll();
if (scroller.computeScrollOffset()) {
liftF.setTranslationX(scroller.getCurrX());
size = scroller.getCurrX();
midF.setTranslationX(scroller.getCurrX() / 3);
invalidate();
}
}
private void scToIndex(int index) {
scroller.startScroll(size, 0, index - size, 0);
invalidate();
}
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
//獲取中間的Fragment
if (midF == null)
midF = (FrameLayout) getChildAt(0);
if (liftF == null)
liftF = (FrameLayout) getChildAt(1);
//獲取左邊的Fragment
right1 = midF.getRight();
//獲取屏幕寬
int right = getRight();
int right5 = right / 5;
liftF.layout(i, i1, i2, i3);
liftIntWight = i2 - right5;
liftIntWight_ = liftIntWight / 3;
midF.layout(-liftIntWight_, i1, (liftIntWight - liftIntWight_), i3);
// measureView(i2 - right5);
Log.e("----", "onLayout: " + (right - right5));
weiht = (i2 - right5);
//獲取子類,重新測量位置
//startLayout();
}
//開始量測位置
public void startLayout() {
for (int i = 0; i < midF.getChildCount(); i++) {
midF.getChildAt(i).layout(
0,
midF.getChildAt(i).getTop(),
liftIntWight,
midF.getChildAt(i).getBottom()
);
}
for (int i = 0; i < liftF.getChildCount(); i++) {
liftF.getChildAt(i).layout(
liftF.getChildAt(i).getLeft(),
liftF.getChildAt(i).getTop(),
liftF.getChildAt(i).getRight(),
liftF.getChildAt(i).getBottom()
);
}
}
//獲取要測量的子類
public void meIndex() {
for (int i = 0; i < liftF.getChildCount(); i++) {
View childAt = liftF.getChildAt(i);
ViewGroup.LayoutParams layoutParams = childAt.getLayoutParams();
if (layoutParams == null) {
layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}
int childMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, layoutParams.width);
int height;
int tempHei = layoutParams.height;
if (tempHei == 0) {
height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
} else {
height = MeasureSpec.makeMeasureSpec(tempHei, MeasureSpec.EXACTLY);
}
childAt.measure(childMeasureSpec, height);
}
for (int i = 0; i < midF.getChildCount(); i++) {
View childAt = midF.getChildAt(i);
ViewGroup.LayoutParams layoutParams = childAt.getLayoutParams();
if (layoutParams == null) {
layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}
int childMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, layoutParams.width);
int height;
int tempHei = layoutParams.height;
if (tempHei == 0) {
height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
} else {
height = MeasureSpec.makeMeasureSpec(tempHei, MeasureSpec.EXACTLY);
}
childAt.measure(childMeasureSpec, height);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (liftF == null) {
liftF = (FrameLayout) getChildAt(1);
}
if (midF == null) {
midF = (FrameLayout) getChildAt(0);
}
//開始測量
meIndex();
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
int endX = (int) event.getX();
mid = endX - startX;
//scrollBy(-mid, 0);
ScrollByView(mid);
startX = endX;
//invalidate();
Log.e("----", "onTouchEvent: " + mid);
break;
case MotionEvent.ACTION_UP:
isLiftRight();
break;
}
return true;
}
//處理是要左劃還是要往右滑
private void isLiftRight() {
//中間值
int mid = weiht / 2;
if (size > weiht) {
liftF.setTranslationX(weiht);
size = weiht;
return;
}
if (size < 0) {
liftF.setTranslationX(0);
size = 0;
return;
}
if (size > mid) {
//向右
scToIndex(weiht);
Log.e("大小", "isLiftRight: " + "向右滑");
}
if (size < mid) {
//向左
scToIndex(0);
Log.e("大小", "isLiftRight: " + "向左滑");
}
}
public void ScrollByView(int x) {
size += x;
if (size < weiht && size >= 0) {
liftF.setTranslationX(size);
midF.setTranslationX(size / 3);
}
}
}
//Layout界面代碼
<?xml version="1.0" encoding="utf-8"?>
<com.example.downlist.view.QQLiftView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mySheView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/mid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#123456">
<LinearLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/hxh" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:id="@+id/lift"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#654321">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/hxh" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dshshfhdskjfhdsf" />
</LinearLayout>
</FrameLayout>
</com.example.downlist.view.QQLiftView>
希望以上代碼對你的自定義控件有所幫助 0.0
如果那塊有不懂得請聯(lián)我喲...0.0 哈哈
----XINHAO_HAN
Demo下載:
鏈接: https://pan.baidu.com/s/1i5P6WML 密碼: 3283
