Veiwをカスタマイズする実践(一)---簡易サイドスライドメニューの実現

転載は出典を明記してください:From李詩雨---http://blog.csdn.net/cjm2484836553/article/details/71063040
詩的ではない女性プログラム猿は良い料理人ではありません~
前述のカスタムView 1、2、3つの記事では、カスタムViewに関するすべての知識点について基本的に触れています.基礎ができて、重点的に見て、難点がついて、構想も明らかになりました.では、私たちは書くのをやめましょう.あまりにもひどいと思いますか.だから今日はまず簡単なサイドスライドメニューを実現しましょう.本当に簡単です.
まず、今日私たちが完成する簡易サイドスライドメニューの効果を見てみましょう.
機能の概要:
左右にスライドすることでメニューをドラッグすることができ、
具体的なボタンをクリックすることで、メニューの自動開閉を実現できます.
では、3番目の文章でまとめた考え方に沿って、一歩一歩進みましょう.
1.まず何を引き継ぐか考える
ここで我々はFrameLayoutを受け継ぐ

public class MySlideLayout extends FrameLayout {

    public MySlideLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

2.カスタム属性を考慮
ここはいらないから、省略すればいいです.
3.関連コールバックメソッドを書き換える
3.1 onFinishInflate()メソッドを書き換え、メニュービューを取得します.ここで2番目の子供はサイドスライドメニューです.

@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        menuView = getChildAt(1);
    }

3.2 onMeasure()の書き換え方法:メニュービューの幅と高さを得る

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        menuWidth = menuView.getMeasuredWidth();
        menuHeight = menuView.getMeasuredHeight();
    }

3.3 OnLayout()の書き換え方法:メニューの再配置

@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        menuView.layout(-menuWidth, 0, 0, menuHeight);
    }

4.スライドを考える
ここではドラッグ可能なメニューを実現する必要があるので、スライドに関連しています.
だから私たちは
4.1 onTouchEvent()メソッドを書き換えて、ユーザーの操作に応答します.
       moveでイベントのオフセットを計算し、現在のレイアウトをスクロールします.
       upでは、レイアウトからのオフセット量に応じて、メニューのオン/オフを判断します

 @Override
    public boolean onTouchEvent(MotionEvent event) {

        int eventX = (int) event.getRawX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN :
                lastX = eventX;
                break;
            case MotionEvent.ACTION_MOVE :
                int dx = eventX-lastX;
                int scrollX = getScrollX()-dx;
                //  scrollX : [-menuWidth, 0]
                if(scrollX0) {
                    scrollX = 0;
                }

                scrollTo(scrollX, getScrollY());
                lastX = eventX;
                break;
            case MotionEvent.ACTION_UP :
                //        
                int totalScrollX = getScrollX();
                if(totalScrollX<=-menuWidth/2) {
                    openMenu();
                } else {
                    closeMenu();
                }
                break;
        }
        return true;
    }

4.2 Scollerによるスムーズなオン/オフ
4.2.1スムーズなオープンメニュー

private void openMenu() {
        scroller.startScroll(getScrollX(), getScrollY(), -menuWidth-getScrollX(), -getScrollY());
        invalidate();
        isOpen = true;
    }

4.2.2スムーズなクローズメニュー

private void closeMenu() {
		scroller.startScroll(getScrollX(), getScrollY(), -getScrollX(), -getScrollY());
		invalidate();
		isOpen = false;
	}

4.3弾性滑りを実現する
Scroller自体はViewを弾性的にスライドさせることはできません.ViewのcomputeScrollメソッドと組み合わせて使用する必要があります.
ここではcomputeScroll()メソッドを書き換える必要があります

@Override
    public void computeScroll() {
        super.computeScroll();
        if(scroller.computeScrollOffset()) {
            scrollTo(scroller.getCurrX(), scroller.getCurrY());
            invalidate();
        }
    }

4.4最後に、外部呼び出しを容易にするために、状態を切り替える方法を提供します.

public void switchState() {
        if (isOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    }

5.スライド衝突を考慮
しばらくは触れませんが、しばらくは考えません.
6.カスタムビューの使用
以上の簡単な手順を経て、私たちのカスタムViewは基本的に完成し、次は使用することができます.
MainActivityのレイアウトでは、カスタムViewを使用します.

詳細レイアウトはソースコードを参照
MainActivityのコード:

public class MainActivity extends AppCompatActivity {
    private TextView tv_answer;
    private MySlideLayout ml_main;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_answer = (TextView) findViewById(R.id.tv_answer);
        ml_main = (MySlideLayout) findViewById(R.id.ml_main);

        //        、     
        findViewById(R.id.main_back).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ml_main.switchState();
            }
        });
    }

    //    item        
    public void clickMenuItem(View v) {
        TextView textiew = (TextView) v;
        String answer = "  ，          ";
        tv_answer.setText(answer);
        ml_main.switchState();
    }
}

これでいいの?うん!このような簡易なサイドスライドメニューが実現しました.話が簡単すぎるのではないでしょうか.あなたたちは手を出すのを潔しとしないのではないでしょうか.
これ、焦らないで、勉強も順を追って進みますか?後期には比較的複雑なカスタムビューの実践がたくさんありますが、メーデーの休暇が終わったら、後に置いてから新編を増やすしかありません.
ソースのダウンロード:ダウンロードをクリック