1. 程式人生 > >Android上類似於iOS相機滑動切換的View

Android上類似於iOS相機滑動切換的View

專案地址:
https://github.com/duxingzhe/ios-camera-scrollerview-in-android
蘋果相機有一個功能就是左右切換拍攝模式,左右滑動就可以切換。然而,目前的問題是如果使用了View和Fragment之後相機開啟是有異常的,所以不能使用這種方式。
於是只好反編譯其他實現了這種功能的相機,得到線索是,有一個自定義的BottomView,BottomView中載入了一個自定義的ViewGroup,裡面有一個ViewGroup。在ViewGroup中定義了三個TextView,然後設定居中,字號等樣式。
在自定義的CameraScrollerView中,先設定好初始化的選擇效果

protected void onLayout(boolean changed, int left,int top,int right, int bottom){
    int cCount = getChildCount();
    int childLeft=0;
    int childRight=0;
    int selectedMode=Util.getCurrentSelectedIndex();
    int widthOffset=0;//居中顯示
    /**
     * 遍歷所有childView根據其寬和高,不考慮margin
     */
    for(int
i=0;i<cCount;i++){ View childView = getChildAt(i); if(i<selectedMode){ widthOffset+=childView.getMeasuredWidth(); } } for (int i = 0; i < cCount; i++) { View childView = getChildAt(i); if(i!=0){ View preView=getChildAt(i-1
); childLeft=preView.getRight(); childRight=childLeft+childView.getMeasuredWidth(); }else{ //getChildAt(0).getMeasuredWidth()應該被替換為被確認的值,迴圈計算。 childLeft=(getWidth()-getChildAt(selectedMode).getMeasuredWidth())/2-widthOffset; childRight=childLeft+childView.getMeasuredWidth(); } childView.layout(childLeft, top, childRight, bottom); } TextView indexText=(TextView)getChildAt(selectedMode); indexText.setTextColor(getResources().getColor(R.color.chosenTextColor)); }

然後這是滑動設定的效果

public final void scrollToNext(int preIndex, int nextIndex){
    TextView selectedText=(TextView)getChildAt(preIndex);
    if(selectedText!=null){
        selectedText.setTextColor(getResources().getColor(R.color.black));
    }
    selectedText=(TextView)getChildAt(nextIndex);
    if(selectedText!=null){
        selectedText.setTextColor(getResources().getColor(R.color.chosenTextColor));
    }
}

public void computeScroll(){
    if(mScroller.computeScrollOffset()){
        scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
        invalidate();
    }
    super.computeScroll();
}

在BottomView中左右滑動的設定為

public void moveLeft(){
    CameraScroller cameraScroller=mCameraScroller;
    cameraScroller.leftIndex=Util.getCurrentSelectedIndex()-1;
    cameraScroller.rightIndex=Util.getCurrentSelectedIndex();
    int k=Math.round((cameraScroller.getChildAt(cameraScroller.leftIndex).getWidth()+cameraScroller.getChildAt(cameraScroller.rightIndex).getWidth())/2.0F);
    cameraScroller.mScroller.startScroll(cameraScroller.getScrollX(),0,-k,0,cameraScroller.duration);
    cameraScroller.scrollToNext(cameraScroller.rightIndex,cameraScroller.leftIndex);
    Util.setSelectedIndex(Util.getCurrentSelectedIndex()-1);
    cameraScroller.invalidate();

}

public void moveRight(){
    CameraScroller cameraScroller=mCameraScroller;
    cameraScroller.leftIndex=Util.getCurrentSelectedIndex();
    cameraScroller.rightIndex=Util.getCurrentSelectedIndex()+1;
    int k=Math.round((cameraScroller.getChildAt(cameraScroller.leftIndex).getWidth()+cameraScroller.getChildAt(cameraScroller.rightIndex).getWidth())/2.0F);
    cameraScroller.mScroller.startScroll(cameraScroller.getScrollX(),0,k,0,cameraScroller.duration);
    cameraScroller.scrollToNext(cameraScroller.leftIndex,cameraScroller.rightIndex);
    Util.setSelectedIndex(Util.getCurrentSelectedIndex()+1);
    cameraScroller.invalidate();
}

在初始化的時候,注意:

public BottomView(Context context, AttributeSet attrs){
    super(context,attrs);
    mContext=context;
    LayoutInflater.from(context).inflate(R.layout.camera_scroller_layout,this,true);
}

則效果為如下圖所示:
這裡寫圖片描述
這裡寫圖片描述