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

【问题标题】：designing a view pager indicator like this设计这样的视图寻呼机指示器
【发布时间】：2017-03-22 15:23:49
【问题描述】：

我正在创建一个像这张图片一样的视图寻呼机指示器，其中图标在单击时会滚动到中心，我该如何实现这一点，我尝试了查看寻呼机指示器和选项卡式布局，但没有成功。

【问题讨论】：

标签： android android-viewpager viewpagerindicator

【解决方案1】：

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类中粘贴这个居中的tablayout。在你的 xml 设计中使用居中的 tablayout 而不是 tablayput

【讨论】：

【解决方案2】：

我建议你使用BottomBar

 <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />

或

同时检查BottomNavigation

<it.sephiroth.android.library.bottomnavigation.BottomNavigation
        android:id="@+id/BottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:bbn_entries="@menu/bottombar_menu_4items"
        app:bbn_scrollEnabled="true"
        app:bbn_badgeProvider="@string/bbn_badgeProvider"
        app:layout_behavior="@string/bbn_phone_view_behavior" />

【讨论】：

非常好，但我想创建它
这样你就可以得到你想要的结果