CoordinatorLayout+AppBarLayout實現Android 仿火幣資產頁（舊）

原創 Keung丶 2020-04-24 10:44

思路：監聽AppBarLayout的滑動位置改變背景色

1.Activity代碼

public class TestActivity extends AppCompatActivity {

    private static final String[] titles = {
            "幣幣", "合約", "法幣", "槓桿"
    };

    private ViewPager mViewPager;
    private MagicIndicator mMagicIndicator;
    private AppBarLayout mAppBarLayout;
    private LinearLayout mLayoutTab;
    private View mLayoutSearchBack;
    private LinearLayout mLayoutSearch;
    private View mViewLine;
    private EditText mEditSearch;
    private int mCurrentIndex;
    private View mViewSpace;
    private LinearLayout mLayoutIndicator;
    private View mViewBack;

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

        mViewPager = findViewById(R.id.viewPager);
        TestFragmentAdapter adapter = new TestFragmentAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mViewPager.setOffscreenPageLimit(4);

        mMagicIndicator = findViewById(R.id.magicIndicator);
        initMagicIndicator();

        mAppBarLayout = findViewById(R.id.appbar);
        mLayoutTab = findViewById(R.id.layoutTab);
        mLayoutSearchBack = findViewById(R.id.layoutSearchBack);
        mLayoutSearch = findViewById(R.id.layoutSearch);
        mViewLine = findViewById(R.id.viewLine);
        mEditSearch = findViewById(R.id.editSearch);
        mViewSpace = findViewById(R.id.viewSpace);
        mLayoutIndicator = findViewById(R.id.layoutIndicator);
        mViewBack = findViewById(R.id.viewBack);

        changeBackground(0);

        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int tabHeight = mLayoutTab.getMeasuredHeight()
                        - mLayoutSearchBack.getMeasuredHeight();
                if (Math.abs(verticalOffset) >= tabHeight) {
                    int alpha = (mLayoutTab.getMeasuredHeight() + verticalOffset) * 255
                            / mLayoutSearchBack.getMeasuredHeight();
                    mLayoutSearch.getBackground().setAlpha(alpha);
                    if (alpha == 0) {
                        mViewLine.setVisibility(View.GONE);
                        mEditSearch.setHintTextColor(Color.parseColor("#72FFFFFF"));
                        mEditSearch.setTextColor(Color.WHITE);
                    } else {
                        mViewLine.setVisibility(View.VISIBLE);
                        mEditSearch.setHintTextColor(Color.parseColor("#80909A"));
                        mEditSearch.setTextColor(Color.parseColor("#1E2631"));
                    }
                } else {
                    mLayoutSearch.getBackground().setAlpha(255);
                }
            }
        });
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            public void onPageScrolled(int position, float positionOffset, int
                    positionOffsetPixels) {
                changeBackground(position, positionOffsetPixels);
            }

            public void onPageSelected(int position) {
                changeBackground(position);
            }

            public void onPageScrollStateChanged(int state) {
                if (state == 1) {
                    mCurrentIndex = mViewPager.getCurrentItem();
                }
            }
        });
    }

    private void initMagicIndicator() {
        CommonNavigator commonNavigator = new CommonNavigator(this);
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {

            @Override
            public int getCount() {
                return 4;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
                clipPagerTitleView.setText(titles[index]);
                clipPagerTitleView.setTextColor(Color.parseColor("#B6BFC6"));
                clipPagerTitleView.setClipColor(Color.WHITE);
                clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mViewPager.setCurrentItem(index);
                    }
                });
                return clipPagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                return null;
            }
        });
        mMagicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(mMagicIndicator, mViewPager);
    }


    private void changeBackground(int nextIndex) {
        final int nextColor = getBackgroundColor(nextIndex);
        ValueAnimator valueAnimator = ValueAnimator.ofInt(
                Color.blue(getBackgroundColor(mViewPager.getCurrentItem())),
                Color.blue(nextColor)
        );
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer blue = (Integer) animation.getAnimatedValue();
                setBackgroundColor(Color.rgb(Color.red(nextColor), Color.green(nextColor),
                        blue));
            }
        });
        valueAnimator.setDuration(300);
        valueAnimator.start();
    }

    private void changeBackground(int nextIndex, int offset) {
        int nextColor;
        if (mCurrentIndex == nextIndex) {
            nextColor = getBackgroundColor(nextIndex + 1);
        } else {
            nextColor = getBackgroundColor(nextIndex);
        }
        int starRed = Color.red(getBackgroundColor(mCurrentIndex));
        int endRed = Color.red(nextColor);
        int starGreen = Color.green(getBackgroundColor(mCurrentIndex));
        int endGreen = Color.green(nextColor);
        int starBlue = Color.blue(getBackgroundColor(mCurrentIndex));
        int endBlue = Color.blue(nextColor);
        int red, green, blue;
        if (offset == 0) {
            return;
        } else {
            int screenWidth = UIUtil.getScreenWidth(this);
            if (mCurrentIndex == nextIndex) {
                //左滑，增大
                red = starRed + (endRed - starRed) * offset
                        / screenWidth;
                green = starGreen + (endGreen - starGreen) * offset
                        / screenWidth;
                blue = starBlue + (endBlue - starBlue) * offset
                        / screenWidth;
            } else {
                //右滑，減小
                red = starRed + (endRed - starRed)
                        * (screenWidth - offset)
                        / screenWidth;
                green = starGreen + (endGreen - starGreen)
                        * (screenWidth - offset)
                        / screenWidth;
                blue = starBlue + (endBlue - starBlue)
                        * (screenWidth - offset)
                        / screenWidth;
            }
        }
        setBackgroundColor(Color.rgb(red, green, blue));
    }


    private void setBackgroundColor(int color) {
        mViewSpace.setBackgroundColor(color);
        mLayoutIndicator.setBackgroundColor(color);
        mLayoutTab.setBackgroundColor(color);
        mViewBack.setBackgroundColor(color);
        mLayoutSearchBack.setBackgroundColor(color);
    }

    private int getBackgroundColor(int index) {
        switch (index) {
            case 0:
                return Color.parseColor("#1783d4");
            case 1:
                return Color.parseColor("#35375d");
            case 2:
                return Color.parseColor("#0f386d");
            case 3:
                return Color.parseColor("#3d475d");
        }
        return Color.parseColor("#1783d4");
    }

2.layout代碼

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutBase"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F7F6FB"
    android:fitsSystemWindows="false">

    <View
        android:id="@+id/viewSpace"
        android:layout_width="match_parent"
        android:layout_height="24dp" />

    <LinearLayout
        android:id="@+id/layoutIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/viewSpace"
        android:orientation="vertical">

        <net.lucode.hackware.magicindicator.MagicIndicator
            android:id="@+id/magicIndicator"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_gravity="center_horizontal" />

        <View
            android:id="@+id/viewLine"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#72FFFFFF" />
    </LinearLayout>

    <View
        android:id="@+id/layoutSearchBack"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/layoutIndicator"
        android:background="#242424" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/layoutIndicator"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll">

            <LinearLayout
                android:id="@+id/layoutTab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#242424"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textAccountName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="--"
                        android:textColor="@android:color/white"
                        android:textSize="14sp" />

                    <TextView
                        android:id="@+id/textAssetLabel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:text="總資產摺合(BTC)"
                        android:textColor="#72FFFFFF"
                        android:textSize="12sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="（BTC）"
                        android:textColor="#72FFFFFF"
                        android:textSize="12sp" />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:layout_weight="1" />

                    <ImageView
                        android:id="@+id/btnAssetsVisibleCtrl"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:scaleType="center"
                        android:src="@mipmap/ic_pwd_eye_open" />

                </LinearLayout>

                <TextView
                    android:id="@+id/textTotalBtc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="15dp"
                    android:text="--"
                    android:textColor="@android:color/white"
                    android:textSize="16sp" />

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

                    <TextView
                        android:id="@+id/textTotalCny"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="***.***"
                        android:textColor="#72FFFFFF"
                        android:textSize="12sp" />

                    <TextView
                        android:id="@+id/textMoneyUnit"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="CNY"
                        android:textColor="#72FFFFFF"
                        android:textSize="12sp" />
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:layout_marginLeft="15dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="15dp"
                    android:background="#72FFFFFF" />

                <LinearLayout
                    android:id="@+id/layoutZeroAsset"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/imageAssetVisible"
                        android:layout_width="15dp"
                        android:layout_height="15dp"
                        android:scaleType="centerInside"
                        android:src="@mipmap/ic_launcher" />

                    <TextView
                        android:id="@+id/textAssetVisible"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:text="隱藏小額幣種"
                        android:textColor="#72FFFFFF"
                        android:textSize="12sp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:src="@mipmap/ic_asset_notice" />
                </LinearLayout>
            </LinearLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <RelativeLayout
                android:id="@+id/layoutSticky"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@android:color/transparent"
                android:tag="sticky"
                app:layout_scrollFlags="scroll|enterAlways">

                <View
                    android:id="@+id/viewBack"
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:background="#242424" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_below="@+id/viewBack" />


                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp"
                    android:background="@drawable/bg_empty_serach_1">

                    <LinearLayout
                        android:id="@+id/layoutSearch"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:background="@drawable/bg_common_fill_corner_white"
                        android:gravity="center_vertical"
                        android:orientation="horizontal"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:scaleType="centerInside"
                            android:src="@mipmap/ic_asset_search" />

                        <EditText
                            android:id="@+id/editSearch"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="5dp"
                            android:layout_weight="1"
                            android:background="@android:color/transparent"
                            android:hint="搜索幣種"
                            android:textColor="#1E2631"
                            android:textColorHint="#80909A"
                            android:textSize="14sp" />

                        <ImageView
                            android:id="@+id/imgClear"
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:paddingLeft="10dp"
                            android:scaleType="centerInside"
                            android:src="@mipmap/ic_launcher"
                            android:visibility="gone" />
                    </LinearLayout>
                </FrameLayout>


            </RelativeLayout>

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

因爲需要改變狀態欄的顏色，Activity的主題使用

<style name="AppThemeFullScreen" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <!--<item name="android:windowFullscreen">true</item>-->
        <!--<item name="android:windowIsTranslucent">true</item>-->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="windowNoTitle">true</item>

其中使用到的TestFragment

public class TestFragment extends Fragment {

    private View mView;
    private RecyclerView mRecyclerView;

    public static TestFragment newInstance() {

        Bundle args = new Bundle();

        TestFragment fragment = new TestFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        if (mView == null) {
            mView = LayoutInflater.from(getContext()).inflate(R.layout.fragment_test, null);
            mRecyclerView = mView.findViewById(R.id.recycle);
            mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
            mRecyclerView.setAdapter(new RecyclerView.Adapter() {
                @NonNull
                @Override
                public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
                                                                  int viewType) {
                    return new RecyclerView.ViewHolder(new TextView(getContext())) {

                    };
                }

                @Override
                public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
                    ((TextView)holder.itemView).setText(String.valueOf(position));
                }

                @Override
                public int getItemCount() {
                    return 100;
                }
            });
        }
        return mView;
    }
}
TestFragmentAdapter
public class TestFragmentAdapter extends FragmentPagerAdapter {

    public TestFragmentAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return TestFragment.newInstance();
    }

    @Override
    public int getCount() {
        return 4;
    }
}

另外引用了開源庫magicindicator

源碼地址https://github.com/allByWave/HuobiAssetPager/tree/master

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

常用的批處理模版

開發、測試、運維人員經常寫腳本也解決很多問題，每次開始寫重複造一次輪子，我也是經常寫重複的腳本，懶得寫博客，今天寫好了一個腳本想把它記錄下來免得下次再寫，這個是一個通用的腳本模版詳細的請查看以下代碼： @echo off& title

qhs1573 2020-06-29 09:27:48

Parcelable 複雜對象，對象列表

public static class A implements Parcelable { private B b; private List<C> cList = new ArrayList<>();

Keung丶 2020-06-25 08:08:31

解決Android 微信分享小程序圖片顯示不全

// 先按5：4生成一張白色背景圖片  int width; int height; // 先按5：4生成一張白色背景圖片 boolean isWidthLong = bi

Keung丶 2020-06-25 08:08:31

NetworkImageView

網絡上找到的一段代碼今晚回去測試下在發出去 NetworkImageView 分析：public class NetworkImageView extends ImageView 他繼承自ImageView,並且添加了一個新方法:

qhs1573 2020-06-19 10:45:25

Android固定Tab，下拉刷新，嵌套滑動

使用原生的控件CoordinatorLayout和AppBarLayout <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.Coordinato

Keung丶 2020-06-09 09:49:38

常用的批處理模版

開發、測試、運維人員經常寫腳本也解決很多問題，每次開始寫重複造一次輪子，我也是經常寫重複的腳本，懶得寫博客，今天寫好了一個腳本想把它記錄下來免得下次再寫，這個是一個通用的腳本模版詳細的請查看以下代碼： @echo off& title

qhs1573 2020-06-29 09:27:48

Parcelable 複雜對象，對象列表

public static class A implements Parcelable { private B b; private List<C> cList = new ArrayList<>();

Keung丶 2020-06-25 08:08:31

解決Android 微信分享小程序圖片顯示不全

// 先按5：4生成一張白色背景圖片  int width; int height; // 先按5：4生成一張白色背景圖片 boolean isWidthLong = bi

Keung丶 2020-06-25 08:08:31

NetworkImageView

網絡上找到的一段代碼今晚回去測試下在發出去 NetworkImageView 分析：public class NetworkImageView extends ImageView 他繼承自ImageView,並且添加了一個新方法:

qhs1573 2020-06-19 10:45:25

Android固定Tab，下拉刷新，嵌套滑動

使用原生的控件CoordinatorLayout和AppBarLayout <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.Coordinato

Keung丶 2020-06-09 09:49:38

RxJava2實現線程切換

Swuagg 2019-06-26 06:51:16

管理已打開的activity

Swuagg 2019-05-06 07:12:58

TextView文字單行循環

Swuagg 2019-04-25 12:08:51

Android BLE4.0 從小白到理解的過程

Swuagg 2019-03-23 04:05:30

Android性能優化之Activity啓動優化

Swuagg 2019-03-12 00:19:33