如何在 android 中制作離散的搜索/進度條？

Question

如何在 android 中制作像步進器一樣的離散進度/搜索欄。 就像我們在 whatsapp 狀態故事中看到的那樣。

Answer 1

雖然它是由很多庫實現的，但我需要在不使用庫的情況下實現它。

我在水平線性布局中使用視圖，並根據需要顯示的部分數量或狀態故事的數量動態划分它。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

<LinearLayout
    android:id="@+id/layout_views"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:orientation="horizontal"
    android:padding="4dp" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="Click" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
String TAG = "MainActivity";
Button mButton;
int x=0,height,width,numberOfSections;
LinearLayout layoutViews;
ArrayList<View> viewsList =new ArrayList<>();

@SuppressLint("ClickableViewAccessibility")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //findviews
    layoutViews = findViewById(R.id.layout_views);
    mButton = (Button) findViewById(R.id.button);

    //for getting dimensions of screen
    DisplayMetrics displayMetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    height = displayMetrics.heightPixels;
    width = displayMetrics.widthPixels;

    //suppose we have to cut section into 4 parts
    numberOfSections = 10;
    width -= (16 + 16*numberOfSections);    //reducing length of layout by 16dp from left and right and in between 16dp {in between*number of sections)
    width /= numberOfSections;
    for(int i=0;i<numberOfSections;i++){
        View v = new View(this);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, 10);
        params.setMargins(16,0,0,0);    //giving 16dp internal margin between two views
        v.setLayoutParams(params);
        viewsList.add(v);   //adding views in array list for changing color on click of button

        v.setBackgroundColor(getResources().getColor(colorAccent));
        layoutViews.addView(v);
    }
    //button onclick function
    mButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
                buttonClick();
        }
    });
}

public void buttonClick(){
   viewsList.get(x).setBackgroundColor(getResources().getColor(colorPrimaryDark));
   x++;
  }
 }

沃耶拉！ 盡管您可以在視圖中添加過渡 animation，但您已經制作了這個動態故事進度條。