Je suis nouveau dans android et j'ai un petit objectif à atteindre.Comment ajouter des lignes verticales au-dessus de seekbar dans android
Je veux créer un seekbar exactement comme ça, je sais comment travailler avec seekbar normal, mais ne pas idée d'ajouter ces lignes verticales au-dessus seekbar.
pouvez-vous me fournir une solution pour cela? Merci d'avance.
fichier xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/view1"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/view2"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/view3"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/view4"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/view5"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#000000" />
</LinearLayout>
</LinearLayout>
<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</LinearLayout>
Java Fichier
public class SampleActivity extends AppCompatActivity {
private SeekBar seekBar;
private View view1;
private View view2;
private View view3;
private View view4;
private View view5;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sample);
initView();
}
private void initView() {
seekBar = (SeekBar) findViewById(R.id.seekbar);
view1 = findViewById(R.id.view1);
view2 = findViewById(R.id.view2);
view3 = findViewById(R.id.view3);
view4 = findViewById(R.id.view4);
view5 = findViewById(R.id.view5);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
changeColor(i);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
private void changeColor(final int i) {
if (i == 0) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
} else if (i > 0 && i <= 20) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
} else if (i > 20 && i <= 40) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
} else if (i > 40 && i <= 60) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
} else if (i > 60 && i <= 80) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
} else if (i > 80 && i <= 100) {
view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
view5.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
}
}
}
color.xml
<color name="green">#29BC4F</color>
<color name="black">#000000</color>
comment puis-je changer la couleur de ces lignes ci-dessus seekbar, il semble que je dois changer Android: propriété de fond de chaque vue. mais je ne sais pas comment y parvenir sur le changement de position de recherche. – Dev
Vous devez le gérer manuellement. vous devez faire comme si (valeurs sekbar se situe entre 0 à 1) { changer la couleur de la première vue } et ainsi de suite –
Merci Rishab, Pouvez-vous me donner un exemple de code ici pour la première vue? – Dev
Voir ce tiers lib https://github.com/edmodo/range-bar/wiki
avec une certaine personnalisation u obtenir ces (lignes verticales) tick marques.
Voir aussi cette réponse Align tick marks to an Android SeekBar
https://www.informaticscentre.co.uk/blog/implementing-a-seekbar-with-stepped-intervals-in-android
Vous pouvez utiliser ce style style = "style @/Widget.AppCompat.SeekBar.Discrete" pour créer un seekbar selon vos besoins:
code peut ressembler à ceci:
<SeekBar
android:id="@+id/seekBar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10"
/>
Ou les ajouter Manua lly en réglant le drawable tickMark:
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10"
android:tickMark="@drawable/tickmark"
/>
tickmark.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="4dp"
android:height="4dp"/>
<solid android:color="@android:color/white"/>
</shape>
dans add fichier layout.xml,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignTop="@+id/seek_bar"
android:layout_marginTop="-20dp"
android:weightSum="10">
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line1"
android:background="@drawable/line_selected" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line2"
android:background="@drawable/line_selected" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line3"
android:background="@drawable/line_selected" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line4"
android:background="@drawable/line_selected" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line5"
android:background="@drawable/line_selected" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line6"
android:background="@drawable/lines" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line7"
android:background="@drawable/lines" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line8"
android:background="@drawable/lines" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line9"
android:background="@drawable/lines" />
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/line10"
android:background="@drawable/lines" />
</LinearLayout>
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
ajouter lines.xml dans le dossier drawable comme celui-ci,
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-3dp"
android:left="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<stroke
android:width="2dp"
android:color="#bebebe" />
</shape>
</item>
</layer-list>
ajouter line_selected.xml dans le dossier drawable comme celui-ci,
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-3dp"
android:left="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<stroke
android:width="2dp"
android:color="#1fc78c" />
</shape>
</item>
</layer-list>
Vous pouvez changer la couleur de la ligne programatically en changeant l'arrière-plan textview.
double possible de [Aligner Android seekbar avec le pouce] (http: // stackoverflow.com/questions/26150340/align-android-seekbar-avec-thumb) – Dev