Android中常用自帶組件的用法(總結)

1、CoordinatorLayout

加強版的FrameLayout,可以監聽其所有子控件的各種事件,然後自動幫助我們做出最爲合理的響應。

2、CardView(卡片方佈局)

卡片式佈局組件,可以這是圓角以及投影效果。

效果圖如下:

如何使用:

(1)添加遠程依賴庫。

implementation 'com.android.support:cardview-v7:27.1.1'

(2)相應佈局文件代碼如下:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:src="@mipmap/img2"
            android:scaleType="centerCrop"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="風景名稱"
            android:textColor="@color/colorBlack"
            android:textSize="16dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="20dp"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

3、SwipeRefreshLayout(下拉刷新)

效果圖:

如何使用:

(1)佈局文件:

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/Main_SRLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></ListView>

</android.support.v4.widget.SwipeRefreshLayout>

(2)相應的Activity中代碼如下:

final SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.Main_SRLayout);
swipeRefreshLayout.setColorSchemeColors(getResources().getColor(R.color.colorLightBlueFB));
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(mContext, "刷新完成", Toast.LENGTH_SHORT).show();
                        swipeRefreshLayout.setRefreshing(false);
                    }
                });
            }
        }).start();

    }
});

4、CollapsingToolbarLayout(可摺疊式標題欄) 

效果圖:

 (1)佈局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/CTL_aBarLayout"
            android:layout_width="match_parent"
            android:layout_height="250dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/CTL_CTLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                app:contentScrim="@color/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/CTL_ivImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/CTL_tBar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_marginTop="20dp"
                    app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>

            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginTop="20dp">

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="15dp"
                    app:cardCornerRadius="5dp">

                    <TextView
                        android:id="@+id/CTL_tvContent"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="10dp"/>

                </android.support.v7.widget.CardView>

            </LinearLayout>

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/CTl_FABtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_add"
            android:layout_marginRight="15dp"
            app:layout_anchor="@id/CTL_aBarLayout"
            app:layout_anchorGravity="bottom|right"/>

    </android.support.design.widget.CoordinatorLayout>

</android.support.constraint.ConstraintLayout>

(2)相應的Activity代碼如下:

public class CollapsingToolbarLayoutActivity extends BaseActivity {

    private Context mContext;

    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private ImageView ivImage;
    private TextView tvContent;

    private String contentStr = "";

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

        //透明狀態欄
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

        baseDataInit();
        bindViews();
        viewsAddListener();
        viewsDataInit();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.TooBar_backup: {
                Toast.makeText(this, "備份功能", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.TooBar_delete: {
                Toast.makeText(this, "刪除功能", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.TooBar_setting: {
                Toast.makeText(this, "設置功能", Toast.LENGTH_SHORT).show();
                break;
            }
        }
        return true;
    }

    @Override
    public void baseDataInit() {
        mContext = this;
        StringBuilder stringBuilder = new StringBuilder();
        for (int i = 0; i < 200; i ++) {
            stringBuilder.append("AppleBananaJany");
        }
        contentStr = stringBuilder.toString();
    }

    @Override
    public void bindViews() {
        toolbar = findViewById(R.id.CTL_tBar);
        collapsingToolbarLayout = findViewById(R.id.CTL_CTLayout);
        ivImage = findViewById(R.id.CTL_ivImage);
        tvContent = findViewById(R.id.CTL_tvContent);
        //基本設置
        setSupportActionBar(toolbar);
        collapsingToolbarLayout.setTitle("FruitName");
        Glide.with(mContext).load(R.mipmap.img2).into(ivImage);
        tvContent.setText(contentStr);
    }

    @Override
    public void viewsAddListener() {

    }

    @Override
    public void viewsDataInit() {

    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章