Android上類似於iOS相機滑動切換的View
阿新 • • 發佈:2019-01-27
專案地址:
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);
}
則效果為如下圖所示: