下面的知識點呢禀横,是自己第一次做這個效果毫痕,記錄下知識允蚣,不知道有沒有更好的實現(xiàn)方法于颖。
文章二------改進版
在Android項目中有些引導頁上面是一些小圖組合成的,背景顏色是純色的嚷兔,每一張顏色不同森渐,這種情況呢,導致在滑動展示引導頁的時候冒晰,切換效果的顏色變化感覺很生硬同衣。本文講解實現(xiàn)根據(jù)滑動逐漸改變背景顏色的一個效果。
先看看效果圖壶运,如下:
1耐齐、主要依賴:
compile'com.android.support:support-v4:23.4.0'
compile'com.readystatesoftware.systembartint:systembartint:1.0.4'
第一個呢大家比較熟悉,就不多說了(確實不知道的呢蒋情,俺也莫法了埠况,找度娘或者姑姑吧,哈哈)棵癣;第二個呢辕翰,主要是沉浸式狀態(tài)欄的一個運用依賴,是狀態(tài)欄顏色也跟著變化狈谊,看著就更舒服了金蜀,對吧刷后!版本號的話就只有大家根據(jù)官方的自己更新了。下面貼出這個狀態(tài)欄依賴的官方地址與介紹渊抄,大家可以看看:
Maven中央倉庫
github代碼地址
2尝胆、代碼部分
代碼實現(xiàn)呢,用的東西很簡單护桦。
1含衔、布局文件,也就是ViewPager的使用二庵。xml代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/rl_root"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.AppIntroActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!--<com.center.mycode.view.CirclePageIndicator-->
<!--android:id="@+id/indicator"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_alignParentBottom="true"-->
<!--android:layout_centerHorizontal="true"-->
<!--android:layout_marginBottom="15dp"/>-->
</RelativeLayout>
其中注釋部分是自定義添加的指示器贪染,可以是數(shù)字、小圓圈催享。
2杭隙、資源文件代碼,我是寫在數(shù)組文件arrays.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="splash_desc">
<item>第一次寫博客</item>
<item>覺得行因妙,來個肯定吧</item>
<item>有不好的地方歡迎大神指點</item>
<item>記得分享喲</item>
</string-array>
<array name="splash_icon">
<item>@mipmap/splash_iv_first</item>
<item>@mipmap/splash_iv_second</item>
<item>@mipmap/splash_iv_third</item>
<item>@mipmap/splash_iv_forth</item>
</array>
<array name="splash_bg">
<item>@color/light_green_500</item>
<item>@color/amber_500</item>
<item>@color/red_400</item>
<item>@color/blue_500</item>
</array>
</resources>
第一個是每一個頁面的一些文字痰憎;第二個是一些圖片、圖標攀涵;第三個是背景顏色铣耘。這些呢都是ViewPager每頁所需要的內(nèi)容,大家可以根據(jù)自己的需求修改以故。(當然demo的話也可以不要這些內(nèi)容蜗细,只需要純色的背景只是為了好看些,哈哈)怒详。
3炉媒、ViewPager的布局,xml如下:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/iv_img"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="2"
android:scaleType="fitEnd"
android:src="@mipmap/splash_iv_first"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:textColor="@color/white"
android:textSize="18sp"/>
<Button
android:id="@+id/btn_launch"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_centerInParent="true"
android:background="@color/grey_500"
android:onClick="goToMain"
android:text="立即開啟"
android:textColor="@color/white"
android:textSize="18sp"/>
</RelativeLayout>
</LinearLayout>
立即開啟按鈕可以先進行隱藏昆烁,最后一頁的時候在顯示吊骤。
4、主要實現(xiàn)代碼:
怎么創(chuàng)建頁面善玫、mainfest怎么引用activity水援、怎么引用控件等基礎操作在這就不說了密强。(后貼出全部代碼)
1茅郎、首先得到要設置背景顏色的根布局控件:
mRootLayout = (RelativeLayout)findViewById(R.id.rl_root);
2、然后就是ViewPager的使用或渤,得給它設置PagerAdapter:
private class IntroPager extends PagerAdapter
{
private String[] mDescs;
private TypedArray mIcons;
public IntroPager(int icoImage, int des)
{
mDescs = getResources().getStringArray(des);
mIcons = getResources().obtainTypedArray(icoImage);
}
@Override
public int getCount()
{
return mIcons.length();
}
@Override
public boolean isViewFromObject(View view, Object object)
{
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position)
{
View itemLayout = getLayoutInflater().inflate(R.layout.layout_app_intro, container, false);
ImageView mImage = (ImageView)itemLayout.findViewById(R.id.iv_img);
TextView mTextView = (TextView)itemLayout.findViewById(R.id.tv_desc);
Button mButton = (Button)itemLayout.findViewById(R.id.btn_launch);
mImage.setImageResource(mIcons.getResourceId(position, 0));
mTextView.setText(mDescs[position]);
if (position == getCount() - 1)
{
mButton.setVisibility(View.VISIBLE);
}
else
{
mButton.setVisibility(View.GONE);
}
container.addView(itemLayout);
return itemLayout;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object)
{
container.removeView((View)object);
}
}
代碼嘛系冗,就不多說,比較簡單薪鹦。重點就是構造方法掌敬,的一個資源文件的引用惯豆。
3、ViewPager添加滑動監(jiān)聽:
滑動監(jiān)聽的代碼是這次的重點奔害,以前用的setOnPageChangeListener楷兽,不過已經(jīng)廢除了,得用addOnPageChangeListener华临,然后實現(xiàn)里面的onPageScrolled方法芯杀。如下:
shades = new ColorShades();
colorBg = getResources().getIntArray(R.array.splash_bg);
mRootLayout = (RelativeLayout)findViewById(R.id.rl_root);
mViewPager = (ViewPager)findViewById(R.id.viewpager);
IntroPager introPager = new IntroPager(R.array.splash_icon, R.array.splash_desc);
mViewPager.setAdapter(introPager);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
shades.setFromColor(colorBg[position % colorBg.length])
.setToColor(colorBg[(position + 1) % colorBg.length])
.setShade(positionOffset);
mRootLayout.setBackgroundColor(shades.generate());
applySelectedColor(shades.generate());
}
@Override
public void onPageSelected(int position)
{
}
@Override
public void onPageScrollStateChanged(int state)
{
}
});
大家都看到了,重點就是ColorShades 和onPageScrolled里面的一個參數(shù)結合使用雅潭。
(1)先看看onPageScrolled的參數(shù):
position:在非第一頁與最后一頁時揭厚,滑動到下一頁,position為當前頁位置扶供;滑動到上一頁筛圆,position為當前頁-1。
positionOffset :滑動到下一頁椿浓,[0,1)區(qū)間上變化太援;滑動到上一頁:(1,0]區(qū)間上變化。
positionOffsetPixels:這個和positionOffset很像轰绵,滑動到下一頁粉寞,[0,寬度)區(qū)間上變化;滑動到上一頁:(寬度,0]區(qū)間上變化左腔。
第一頁時:滑動到上一頁position=0 唧垦,其他基本為0 ;最后一頁滑動到下一頁 position為當前頁位置液样,其他兩個參數(shù)為0振亮。
由此發(fā)現(xiàn),positionOffset很適合作為鞭莽,漸變坊秸,縮放的控制參數(shù);positionOffsetPixels則可以作為平移等的控制參數(shù)澎怒。
那么positionOffset就能用來實現(xiàn)滑動切換時背景顏色進行漸變切換褒搔。
(2)ColorShades :
主要實現(xiàn)了從哪個顏色變化到哪個顏色,以及引用positionOffset進行控制顏色的漸變喷面,返回RGB組合成的一個新顏色值星瘾,我們設置這個顏色值就可以了。代碼如下:
/**
* Source from :
https://gist.github.com/cooltechworks/4f37021b1216f773daf8
* Color shades will provide all the intermediate colors between two colors. It just requires a decimal value between
* 0.0 to 1.0
* and it provides the exact shade combination of the two color with this shade value.
* Textual explanation :
*
* White LtGray Gray DkGray Black
* 0 0.25 0.5 0.75 1
* Given two colors as White and Black,and shade
* as 0 gives White
* as 0.25 gives Light gray
* as 0.5 gives Gray
* as 0.75 gives Dark gray
* as 1 gives Black.
*/
public class ColorShades
{
private int mFromColor;
private int mToColor;
private float mShade;
public ColorShades setFromColor(int fromColor)
{
this.mFromColor = fromColor;
return this;
}
public ColorShades setToColor(int toColor)
{
this.mToColor = toColor;
return this;
}
public ColorShades setFromColor(String fromColor)
{
this.mFromColor = Color.parseColor(fromColor);
return this;
}
public ColorShades setToColor(String toColor)
{
this.mToColor = Color.parseColor(toColor);
return this;
}
public ColorShades forLightShade(int color)
{
setFromColor(Color.WHITE);
setToColor(color);
return this;
}
public ColorShades forDarkShare(int color)
{
setFromColor(color);
setToColor(Color.BLACK);
return this;
}
public ColorShades setShade(float shade)
{
this.mShade = shade;
return this;
}
/**
* Generates the shade for the given color.
*
* @return the int value of the shade.
*/
public int generate()
{
int fromR = Color.red(mFromColor);
int fromG = Color.green(mFromColor);
int fromB = Color.blue(mFromColor);
int toR = Color.red(mToColor);
int toG = Color.green(mToColor);
int toB = Color.blue(mToColor);
int diffR = toR - fromR;
int diffG = toG - fromG;
int diffB = toB - fromB;
int red = fromR + (int)((diffR * mShade));
int green = fromG + (int)((diffG * mShade));
int blue = fromB + (int)((diffB * mShade));
return Color.rgb(red, green, blue);
}
/**
* Assumes the from and to color are inverted before generating the shade.
* @return the int value of the inverted shade.
*/
public int generateInverted()
{
int fromR = Color.red(mFromColor);
int fromG = Color.green(mFromColor);
int fromB = Color.blue(mFromColor);
int toR = Color.red(mToColor);
int toG = Color.green(mToColor);
int toB = Color.blue(mToColor);
int diffR = toR - fromR;
int diffG = toG - fromG;
int diffB = toB - fromB;
int red = toR - (int)((diffR * mShade));
int green = toG - (int)((diffG * mShade));
int blue = toB - (int)((diffB * mShade));
return Color.rgb(red, green, blue);
}
/**
* Gets the String equivalent of the generated shade
* @return String value of the shade
*/
public String generateInvertedString()
{
return String.format("#%06X", 0xFFFFFF & generateInverted());
}
/**
* Gets the inverted String equivalent of the generated shade
* @return String value of the shade
*/
public String generateString()
{
return String.format("#%06X", 0xFFFFFF & generate());
}
}
這個是人家造的輪子惧辈,源碼地址呢也在注釋里面琳状。小伙伴可以去看看大牛寫的。然后給設置背景顏色:
mRootLayout.setBackgroundColor(shades.generate());
這樣呢也就基本完成了滑動漸變背景色的功能盒齿,但是這個看起不爽念逞,狀態(tài)欄的顏色要是也跟著變化困食,整個屏幕都是一個顏色,更好看了翎承。然后我們就運用到了前面說的第二個依賴包來設置狀態(tài)欄顏色硕盹。怎么使用呢,可以參考前面給出的作者代碼地址叨咖,然后我也貼出我實現(xiàn)的代碼莱睁。主要是onCreate方法里面:
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
//透明狀態(tài)欄
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明導航欄
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
setContentView(R.layout.activity_app_intro);
mTintManager = new SystemBarTintManager(this);
mTintManager.setStatusBarTintEnabled(true);
mTintManager.setNavigationBarTintEnabled(true);
applySelectedColor(R.color.light_green_500);//這里給他設置第一個頁面的顏色值
init();
}
//設置狀態(tài)欄顏色,在onPageScrolled里進行背景顏色一樣的設置值芒澜。
private void applySelectedColor(int color)
{
mTintManager.setTintColor(color);
}
好了代碼基本大概就是這樣仰剿,然后出來的效果呢,就是展示圖那樣痴晦。
第一次寫文章南吮,望大家給出寶貴建議,以及不當之處請斧正誊酌,有更好的實現(xiàn)方法部凑,大家也可以聯(lián)系呀,嘿嘿碧浊,大家共同學習涂邀。感謝大家!么么噠箱锐!
哦比勉,對了,5.0以上運行效果驹止!