[Android UI] the transparency gradient effect of the ActionBar dragged up or down with ScorllView

[Android UI] the transparency gradient effect of the ActionBar dragged up or down with ScorllView

I have seen more and more applications use this effect, such as the main interface of QQ space 5.0. It looks really good! I searched for the relevant implementation methods and found that the related solutions have long been available:

Demo of transparency change of scrolling ActionBar in imitation QQ space

I also saw this implementation method on github, which is also the main core content of this blog post:

 

The effect is as follows:

This is the Demo structure:

1. The FadingActionBarHelper. java class is the core class for processing Actionbar. It processes the background color alpha of actionbar for scroll events.

 

Public class FadingActionBarHelper {private static final String TAG = FadingActionBarHelper; private int mAlpha = 255; private Drawable mDrawable; private boolean isAlphaLocked; private final ActionBar mActionBar; public FadingActionBarHelper (final ActionBar) {mActionBar = actionBar;} public FadingActionBarHelper (final ActionBar actionBar, final Drawable drawable) {mActionBar = action Bar; setActionBarBackgroundDrawable (drawable);} public void setactionbargrounddrawable (Drawable drawable) {setActionBarBackgroundDrawable (drawable, true);} @ TargetApi (Build. VERSION_CODES.KITKAT) public void setActionBarBackgroundDrawable (Drawable drawable, boolean mutate) {mDrawable = mutate? Drawable. mutate (): drawable; mActionBar. setBackgroundDrawable (mDrawable); if (mAlpha = 255) {if (Build. VERSION. SDK_INT> = Build. VERSION_CODES.KITKAT) mAlpha = mDrawable. getAlpha () ;}else {setActionBarAlpha (mAlpha) ;}/ *** An {@ link android. app. actionBar} background drawable. ** @ see # setActionBarBackgroundDrawable (android. graphics. drawable. drawable) * @ see # setActionBarAlpha (int) */publi C Drawable getActionBarBackgroundDrawable () {return mDrawable;}/*** Please use this method for global changes only! * This is helpful when you need to provide something like * Navigation drawer: lock ActionBar and set * {@ link android. graphics. drawable. drawable # setAlpha (int)} * to {@ link # getActionBarBackgroundDrawable ()} directly. ** @ param alpha a value from 0 to 255 * @ see # getActionBarBackgroundDrawable () * @ see # getActionBarAlpha () */public void setActionBarAlpha (int alpha) {if (mDrawable = null) {Log. W (TAG, Set action bar background before setting the alpha level !); Return;} if (! IsAlphaLocked) {mDrawable. setAlpha (alpha); View view = mActionBar. getCustomView (); if (view! = Null) {// here is the processing of the custom actionbar background. Here I am going to handle it. if (alpha> = 55) {view. findViewById (R. id. search_button ). setBackgroundResource (R. drawable. search); view. findViewById (R. id. refresh_button ). setBackgroundResource (R. drawable. refresh);} else {view. findViewById (R. id. search_button ). setBackgroundResource (R. drawable. skin_nav_icon_l_search_rev); view. findViewById (R. id. refresh_button ). setBackgroundResource (R. drawable. skin_nav_ I Con_r_refresh_rev);} Log. I (TAG, search_button.alpha => + alpha) ;}} mAlpha = alpha;} public int getActionBarAlpha () {return mAlpha ;} /*** When ActionBar's alpha is locked {@ link # setActionBarAlpha (int )} * won't change drawable's alpha (but will change {@ link # getActionBarAlpha ()} level) ** @ param lock */public void setActionBarAlphaLocked (boolean lock) {// Update alpha level on unlock if (isAlph ALocked! = (IsAlphaLocked = lock )&&! IsAlphaLocked) {setActionBarAlpha (mAlpha) ;}} public boolean isActionBarAlphaLocked () {return isAlphaLocked ;}}

2. I am not copying other component classes. If you are interested, you can download the project o (release _ release) o on github.

 

 

public class NotifyingScrollView extends ScrollView {    // Edge-effects don't mix well with the translucent action bar in Android 2.X    private boolean mDisableEdgeEffects = true;    /**     * @author Cyril Mottier     */    public interface OnScrollChangedListener {        void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);    }    private OnScrollChangedListener mOnScrollChangedListener;    public NotifyingScrollView(Context context) {        super(context);    }    public NotifyingScrollView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public NotifyingScrollView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        super.onScrollChanged(l, t, oldl, oldt);        if (mOnScrollChangedListener != null) {            mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);        }    }    public void setOnScrollChangedListener(OnScrollChangedListener listener) {        mOnScrollChangedListener = listener;    }    @Override    protected float getTopFadingEdgeStrength() {        // http://stackoverflow.com/a/6894270/244576        if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {            return 0.0f;        }        return super.getTopFadingEdgeStrength();    }    @Override    protected float getBottomFadingEdgeStrength() {        // http://stackoverflow.com/a/6894270/244576        if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {            return 0.0f;        }        return super.getBottomFadingEdgeStrength();    }}

 

3. for common java programmers, you don't know how to use it, but you must know how to use it, how to apply it to our actual projects, and how to transform it, this is the main interface of the demo. How many lines of code can be used?

 

Public class MainActivity extends Activity {private FadingActionBarHelper mFadingActionBarHelper; private ActionBar mActionBar; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mActionBar = getActionBar (); // use the ActionBar mActionBar of the custom layout. setDisplayOptions (ActionBar. DISPLAY_SHOW_CUSTOM); mActionBar. setCustomView (R. layout. my_actionbar); // defines the background color mFadingActionBarHelper = new FadingActionBarHelper (getActionBar (), getResources (). getDrawable (R. drawable. actionbar_bg); if (savedInstanceState = null) {getFragmentManager (). beginTransaction (). add (R. id. container, new ListViewFragment ()). commit () ;}@ Override public boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. // The menu page is hidden due to the effect. // getMenuInflater (). inflate (R. menu. main, menu); return true ;}@ Override public boolean onOptionsItemSelected (MenuItem item) {// Handle action bar item clicks here. the action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest. xml. return super. onOptionsItemSelected (item);} // do not forget this code: public FadingActionBarHelper getFadingActionBarHelper () {return mFadingActionBarHelper ;}}