Wednesday, July 24, 2013

Horizontal List View with scrollbar

To display list of thumbnail images horizontally on the Android, two images per screen, we use Horizontal ListView from DevsmartLib, but the client would like to show up horizontal scrollbar and position indicator also.

Because the lib doesn't support those features, so we must implement them.

To display the position indicator when scrolling, I add function displayPosition() at the bottom of the onLayout() method:

 @Override   
 protected synchronized void onLayout(boolean changed, int left, int top,    
       int right, int bottom) {   
      ....   
      displayPosition();   
 }   
 private int childWidth=0;  
 private void displayPosition() {   
      String counter = "";  
      if (getChildCount()>0 && mAdapter.getCount()>2) {  
           if (childWidth==0) {  
                childWidth = getChildAt(0).getMeasuredWidth();  
           }  
           double positionX = (double)mCurrentX/childWidth;  
           double fractional = positionX % 1;  
           int position = 1 + (int)positionX;  
           if (fractional > 0.3) position++;  
           counter = String.format(" - %s/%s",position,mAdapter.getCount());  
      }  
      ((Activity) this.getContext()).setTitle("List"+counter);  
 }    
}
To display horizontal scrollbar, it's not easy because it's hard to find examples or good reference, have to google a lot!

Finally found out this, so just implement necessary functions:

 public HorizontalListView(Context context, AttributeSet attrs) {   
   TypedArray a = context.obtainStyledAttributes(R.styleable.View);   
   initializeScrollbars(a);   
   a.recycle();   
   setWillNotDraw(false);   
   setScrollbarFadingEnabled(false);   
   setHorizontalScrollBarEnabled(true);   
 }   
 @Override   
 protected int computeHorizontalScrollOffset() {   
      return this.mCurrentX;   
 }   
 @Override  
 protected int computeHorizontalScrollRange() {  
      return mAdapter.getCount()<3?0:(mAdapter.getCount()*childWidth);  
 }  

The shorten attrs.xml as below:

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  
 <declare-styleable name="View">  
 <attr name="android:scrollX"/>  
 <attr name="android:scrollY"/>  
 <attr name="android:scrollbarAlwaysDrawHorizontalTrack"/>  
 <attr name="android:scrollbarAlwaysDrawVerticalTrack"/>  
 <attr name="android:scrollbarDefaultDelayBeforeFade"/>  
 <attr name="android:scrollbarFadeDuration"/>  
 <attr name="android:scrollbarSize"/>  
 <attr name="android:scrollbarStyle"/>  
 <attr name="android:scrollbarThumbHorizontal"/>  
 <attr name="android:scrollbarThumbVertical"/>  
 <attr name="android:scrollbarTrackHorizontal"/>  
 <attr name="android:scrollbarTrackVertical"/>  
 <attr name="android:scrollbars"/>    
 </declare-styleable>  
 </resources>  

Note: It's nice to view code in blogger with codeformatter :). Thank you.

No comments:

Post a Comment