思路:监听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