Android and android Official Website

Android and android Official Website

It represents the top-level apps of domestic software. Of course, it has some good results,

We can imitate learning. Below is the slide of the Bottom Bar with the page

The color and transparency of the text and image changes.

As follows:

 

First, let's analyze the problem. When did it change? We have two points:

1. The image color has changed.

This kind of change is amazing. It is achieved through transparency. You can play it with your friends.

The transparency of the gray image increases, and the transparency of the orange image decreases.

2. The text color has changed.

The transparency does not change when the font is changed, but the color values are converted to the gray and Orange colors.

A friend who has learned the concept of color in detail may be a little difficult to implement, but after understanding the principle, everything is very simple.

Start with the layout.

(1) The bottom tag Item is as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="80dp"                android:gravity="center">    <LinearLayout        android:id="@+id/m_tablayout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical"        android:gravity="center">        <com.galis.weixinstudy.TabIconView            android:id="@+id/mTabIcon"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <TextView            android:id="@+id/mTabText"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="1"/>    </LinearLayout>    <View        android:id="@+id/mTabTip"        android:layout_width="10dp"        android:layout_height="10dp"        android:background="@drawable/red_dot"        android:layout_marginLeft="-2dp"        android:layout_alignTop="@id/m_tablayout"        android:layout_toRightOf="@id/m_tablayout"        android:gravity="center"        android:visibility="gone"/></RelativeLayout>

(2) The Activity layout is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:background="@android:color/white">    <com.galis.weixinstudy.UIViewPager        android:id="@+id/home_view_page"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"/>    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="@android:color/darker_gray"/>    <com.galis.weixinstudy.UITabBottom        android:id="@+id/home_tab_bottom"        android:layout_width="match_parent"        android:layout_height="60dp"/></LinearLayout>

Corresponding Entity Bean class:

Public final class UITabItem {View parent; TabIconView iconView; // picture TextView labelView; // tag, such as homepage, my View tipView; // red dot prompt and so on}

TabIconView is a key image rendering class. The setmAlpha method accepts the transparency parameter to redraw itself.

Public class TabIconView extends ImageView {private int mAlpha; private Paint mPaint; private Bitmap clickedBitmap; private Bitmap unClickBitmap; public TabIconView (Context context) {super (context); mAlpha = 0 ;} public TabIconView (Context context, AttributeSet attrs) {super (context, attrs); mAlpha = 0;} public TabIconView (Context context, AttributeSet attrs, int defStyle) {super (context, attr S, defStyle); mAlpha = 0 ;}@ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); if (mPaint! = Null) {mPaint. setAlpha (255-mAlpha); // sets the transparency canvas. drawBitmap (unClickBitmap, null, new Rect (0, 0, unClickBitmap. getWidth (), unClickBitmap. getHeight (), mPaint); mPaint. setAlpha (mAlpha); // sets the transparency canvas. drawBitmap (clickedBitmap, null, new Rect (0, 0, clickedBitmap. getWidth (), clickedBitmap. getHeight (), mPaint) ;}} public void init (int clickedDrawableRid, int unclickedDrawableRid) {clickedBitmap = BitmapFactory. decodeResource (getResources (), clickedDrawableRid); // click the image unClickBitmap = BitmapFactory. decodeResource (getResources (), unclickedDrawableRid); // setLayoutParams (new LinearLayout. layoutParams (clickedBitmap. getWidth (), clickedBitmap. getHeight (); mPaint = new Paint (Paint. ANTI_ALIAS_FLAG); mAlpha = 0;} public void setmAlpha (int alpha) {mAlpha = alpha; invalidate (); // call the OnDraw method again }}

UITabBottom encapsulates the operation of text color values. We need to understand the conversion of text color, which is actually the conversion of RGB.

For example, 0xFF123456

FF indicates transparency, 12 indicates Red, 34 indicates Green, and 56 indicates Blue.

If it is a 6-digit color value, for example, 0x123456, the default transparency is FF.

How can I get the Red value? We can use the & operator to obtain the desired bit information.

0x123456 & 0xff0000

We can get 0x120000, and then get the Red value from the 16-bit right shift. Why is it 16,

Because it is in hexadecimal notation, when it is converted to binary notation, one digit is equivalent to four digits, and four zeros are 16 digits.

You can understand this. The color conversion can be achieved through the RGB operation.

As follows:

R1 = (colorClick & 0xff0000)> 16; // Red value not selected

G1 = (colorClick & 0xff00)> 8; // The unselected Green value

B1 = (colorClick & 0xff); // Blue value not selected

R2 = (colorUnclick & 0xff0000)> 16; // The selected Red value

G2 = (colorUnclick & 0xff00)> 8; // The selected Green value

B2 = (colorUnclick & 0xff); // The selected Blue value

Rm = R1-R2; // Red difference value

Gm = G1-G2; // Green difference value

Bm = B1-B2; // Blue difference value

When the ViewPage slides, f is the percentage of the sliding distance to the page width. f is the percentage,

Find the values of R, G, and B and combine them into a color value.

Int R = (int) (R2 + f * Rm );

Int G = (int) (G2 + f * Gm );

Int B = (int) (B2 + f * Bm );

Return 0xff <24 | R <16 | G <8 | B;

The Code is as follows:

Public class UITabBottom extends LinearLayout implements View. onClickListener {public static interface listener {public void onTabChange (int index);} private UITabItem tab0; private region tab1; private UITabItem tab2; private UITabItem tab3; private UIViewPager mViewPager; private region changeListener; private int colorClick; private int colorUnclick; private int R1; // The unselected Red value private int G1; // The unselected Green value private int B1; // The unselected Blue value private int R2; // The selected Red value private int G2; // The selected Green value private int B2; // The selected Blue value private int Rm = R2-R1; // Red difference private int Gm = G2-G1; // Green difference private int Bm = B2-B1; // Blue difference private int mIndex; public UITabBottom (Context context) {super (context);} public UITabBottom (Context context, AttributeSet attrs) {super (context, Attrs); init ();} public UIViewPager getmViewPager () {return mViewPager;} public void setmViewPager (UIViewPager mViewPager) {this. mViewPager = mViewPager;} private UITabItem newChildItem (int I) {UITabItem tabItem = new UITabItem (); tabItem. parent = LayoutInflater. from (getContext ()). inflate (R. layout. m_tabitem, null); tabItem. iconView = (TabIconView) tabItem. parent. findViewById (R. id. mTabIcon); TabItem. labelView = (TextView) tabItem. parent. findViewById (R. id. mTabText); tabItem. tipView = tabItem. parent. findViewById (R. id. mTabTip); tabItem. parent. setTag (I); tabItem. parent. setOnClickListener (this); return tabItem;} public void init () {colorClick = getResources (). getColor (R. color. select); colorUnclick = getResources (). getColor (R. color. unselect); int tabBottomHeight = ViewGroup. layoutParams. MATCH_PARENT; setOrientation (LinearLayout. HORIZONTAL); // tab0 tab0 = newChildItem (0); LinearLayout. layoutParams layoutParams = new LinearLayout. layoutParams (0, tabBottomHeight); layoutParams. weight = 1; tab0.labelView. setText ("Homepage"); tab0.labelView. setTextColor (colorClick); tab0.iconView. init (R. drawable. tabbar_home_selected, R. drawable. tabbar_home); addView (tab0.parent, layoutParams); // tab1 tab 1 = newChildItem (1); layoutParams = new LinearLayout. layoutParams (0, tabBottomHeight); layoutParams. weight = 1; tab1.labelView. setText ("message"); tab1.labelView. setTextColor (colorUnclick); tab1.iconView. init (R. drawable. tabbar_message_center_selected, R. drawable. tabbar_message_center); addView (tab1.parent, layoutParams); // tab2 tab2 = newChildItem (2); layoutParams = new LinearLayout. layoutParams (0, tab BottomHeight); layoutParams. weight = 1; tab2.labelView. setText (""); tab2.labelView. setTextColor (colorUnclick); tab2.iconView. init (R. drawable. tabbar_discover_selected, R. drawable. tabbar_discover); addView (tab2.parent, layoutParams); // tab3 tab3 = newChildItem (3); layoutParams = new LinearLayout. layoutParams (0, tabBottomHeight); layoutParams. weight = 1; tab3.labelView. setText ("I"); tab3.labelView. SetTextColor (colorUnclick); tab3.iconView. init (R. drawable. tabbar_profile_selected, R. drawable. tabbar_profile); addView (tab3.parent, layoutParams); R1 = (colorClick & 0xff0000)> 16; G1 = (colorClick & 0xff00)> 8; B1 = (colorClick & 0xff ); r2 = (colorUnclick & 0xff0000)> 16; G2 = (colorUnclick & 0xff00)> 8; B2 = (colorUnclick & 0xff); Rm = R1-R2; gm = G1-G2; Bm = B1-B2; mIndex = 0;} p Rivate OnUITabChangeListener getChangeListener () {return changeListener;} public void setChangeListener (OnUITabChangeListener changeListener) {this. changeListener = changeListener;} public void setTabRedDot (int index, int state) {if (index = 2) {tab2.tipView. setVisibility (state);} if (index = 3) {tab3.tipView. setVisibility (state) ;}} public void selectTab (int index) {if (mIndex = index) {re Turn;} mIndex = index; if (changeListener! = Null) {changeListener. onTabChange (mIndex);} // mIndex indicates switch (mIndex) {case 0: tab0.iconView between mIndex and mIndex + 1. setmAlpha (255); tab1.iconView. setmAlpha (0); tab2.iconView. setmAlpha (0); tab3.iconView. setmAlpha (0); tab0.labelView. setTextColor (colorClick); tab1.labelView. setTextColor (colorUnclick); tab2.labelView. setTextColor (colorUnclick); tab3.labelView. setTextColor (colorUnclick); break; case 1: tab0.iconView. setmAlpha (0); tab1.iconView. setmAlpha (255); tab2.iconView. setmAlpha (0); tab3.iconView. setmAlpha (0); tab0.labelView. setTextColor (colorUnclick); tab1.labelView. setTextColor (colorClick); tab2.labelView. setTextColor (colorUnclick); tab3.labelView. setTextColor (colorUnclick); break; case 2: tab0.iconView. setmAlpha (0); tab1.iconView. setmAlpha (0); tab2.iconView. setmAlpha (1, 255); tab3.iconView. setmAlpha (0); tab0.labelView. setTextColor (colorUnclick); tab1.labelView. setTextColor (colorUnclick); tab2.labelView. setTextColor (colorClick); tab3.labelView. setTextColor (colorUnclick); break; case 3: tab0.iconView. setmAlpha (0); tab1.iconView. setmAlpha (0); tab2.iconView. setmAlpha (0); tab3.iconView. setmAlpha (255); tab0.labelView. setTextColor (colorUnclick); tab1.labelView. setTextColor (colorUnclick); tab2.labelView. setTextColor (colorUnclick); tab3.labelView. setTextColor (colorClick); break;}/*** spell the color value * @ param f * @ return */private int getColorInt (float f) {int R = (int) (R2 + f * Rm); int G = (int) (G2 + f * Gm); int B = (int) (B2 + f * Bm ); return 0xff <24 | R <16 | G <8 | B;}/*** location is the index, e.g ., fragment0 to fragment1, input location = 0 * f is the percentage of sliding distance ** @ param location * @ param f */public void scroll (int location, float f) {int leftAlpha = (int) (255 * (1-f); int rightAlpha = (int) (255 * f); int leftColor = getColorInt (1-f ); int rightColor = getColorInt (f); switch (location) {case 0: tab0.iconView. setmAlpha (leftAlpha); tab1.iconView. setmAlpha (rightAlpha); tab0.labelView. setTextColor (leftColor); tab1.labelView. setTextColor (rightColor); break; case 1: tab1.iconView. setmAlpha (leftAlpha); tab2.iconView. setmAlpha (rightAlpha); tab1.labelView. setTextColor (leftColor); tab2.labelView. setTextColor (rightColor); break; case 2: tab2.iconView. setmAlpha (leftAlpha); tab3.iconView. setmAlpha (rightAlpha); tab2.labelView. setTextColor (leftColor); tab3.labelView. setTextColor (rightColor); break ;}@ Override public void onClick (View v) {int I = (Integer) v. getTag ()). intValue (); mViewPager. setCurrentItem (I, false); selectTab (I );}}

For the main Activity, you can obtain the percentage by sliding the ViewPager listener to refresh the status of the Bottom Bar.

Public class MainActivity extends FragmentActivity {private extends mUiTabBottom; private UIViewPager attributes; private ArrayList <Fragment> fragments = new ArrayList <Fragment> (); @ Override protected void onCreate (Bundle entity) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initFragments (); mUiTabBottom = (UITabBottom) findViewById (R. id. home_tab_bottom); mUiViewPager = (UIViewPager) findViewById (R. id. home_view_page); mUiTabBottom. setmViewPager (mUiViewPager); mUiViewPager. setAdapter (new FragmentPagerAdapter (getsuppfrfragmentmanager () {@ Override public Fragment getItem (int I) {return fragments. get (I) ;}@ Override public int getCount () {return fragments. size () ;}}); mUiViewPager. setOnPageChangeListener (new ViewPager. onPageChangeListener () {@ Override public void onPageScrolled (int pageIndex, float v, int i2) {mUiTabBottom. scroll (pageIndex, v); <span style = "font-size: 13.3331041162px; font-family: Arial, Helvetica, sans-serif; ">/// refresh the Bottom Bar </span >}@ Override public void onPageSelected (int I) {mUiTabBottom. selectTab (I); // refresh the bottom bar} @ Override public void onPageScrollStateChanged (int I) {}});} private void initFragments () {for (int I = 0; I <4; I ++) {fragments. add (CustomFragment. newInstance (I) ;}} public static class CustomFragment extends Fragment {private int position; private boolean isShown; public static CustomFragment newInstance (int pos) {CustomFragment fragment = new CustomFragment (); bundle bundle = new Bundle (); bundle. putInt ("pos", pos); fragment. setArguments (bundle); return fragment;} @ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {Log. e ("fragment" + position, "onCreateView"); super. onCreateView (inflater, container, savedInstanceState); View layout = inflater. inflate (R. layout. m_fragment, null); View progress = layout. findViewById (R. id. progressContainer); View content = layout. findViewById (R. id. listContainer); return layout ;}}}

Project address: https://github.com/galis/WeiXinStudy.git

This completes the entire logic. After two days, I hope it will be helpful to you.