设计像这样的视图寻呼机指示器

问题描述：

我正在创建一个类似于此图像的视图调页器指示器，单击该图标时图标会滚动到中心，如何实现此目的，我尝试了视图调页器"指示器和选项卡式布局，但没有成功.

I am creating a view pager indicator like this image , in which icons scroll to center when clicked , How can I achieve this , I have tried View Pager indicator and tabbed layout but no success .

答

public class CenteringTabLayout extends TabLayout {
private Typeface mTypeface;

public CenteringTabLayout(Context context) {
    super(context);
}

public CenteringTabLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CenteringTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}



@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    View firstTab = ((ViewGroup) getChildAt(0)).getChildAt(0);
    View lastTab = ((ViewGroup) getChildAt(0)).getChildAt(((ViewGroup) getChildAt(0)).getChildCount() - 1);
   if(firstTab!=null)

    ViewCompat.setPaddingRelative(getChildAt(0), (getWidth() / 2) - (firstTab.getWidth() / 2), 0, (getWidth() / 2) - (lastTab.getWidth() / 2), 0);

}

@Override
public void addOnTabSelectedListener(@NonNull OnTabSelectedListener listener) {
    super.addOnTabSelectedListener(listener);

}

@Override
public void addTab(@NonNull Tab tab) {
    super.addTab(tab);
    ViewGroup mainView = (ViewGroup) getChildAt(0);
    ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());

    int tabChildCount = tabView.getChildCount();
    for (int i = 0; i < tabChildCount; i++) {
        View tabViewChild = tabView.getChildAt(i);
        if (tabViewChild instanceof TextView) {
            ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
        }
    }
}
}

将此居中布局布局粘贴到您的java类中. 在XML设计中使用居中的tablayout而不是tablayput

paste this centering tablayout in you java class. use centering tablayout instead of tablayput in your xml design

设计像这样的视图寻呼机指示器

相关推荐