在seekbar中創建垂直線

Question

我正在嘗試創建類似的東西。問題是如何在靠近seekbar的位置創建垂直線。我試着給出here的代碼，但是seekbar線消失了。任何幫助，將不勝感激。這是我迄今爲止所做的。

public class MainActivity extends Activity { 
     @Override 
     protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      SeekBar sb = (SeekBar)findViewById(R.id.seekBar1); 



      //Get the width of the main view. 
      Display display = getWindowManager().getDefaultDisplay(); 
      Point displaysize = new Point(); 
      display.getSize(displaysize); 
      int width = displaysize.x; 




      //set the seekbar maximum (Must be a even number, having a remainder will cause undersirable results) 
      //this variable will also determine the number of points on the scale. 
      int seekbarmax = 10; 




      int seekbarpoints = (width/seekbarmax); //this will determine how many points on the scale there should be on the seekbar 


      //find the seekbar in the view, and set some behaviour properties 
      SeekBar seekbar = (SeekBar)findViewById(R.id.seekBar1); 


      //Set the seekbar to a max range of 10 
      seekbar.setMax(seekbarmax); 




      //Create a new bitmap that is the width of the screen 
      Bitmap bitmap = Bitmap.createBitmap(width, 100, Bitmap.Config.ARGB_8888); 
      //A new canvas to draw on. 
      Canvas canvas = new Canvas(bitmap); 


      //a new style of painting - colour and stoke thickness. 
      Paint paint = new Paint(); 
      paint.setColor(Color.BLUE); //Set the colour to red 
      paint.setStyle(Paint.Style.STROKE); //set the style 
      paint.setStrokeWidth(1); //Stoke width 


      Paint textpaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
      textpaint.setColor(Color.rgb(61, 61, 61));// text color RGB 
      textpaint.setTextSize(28);// text size 




      int point = 0; //initiate the point variable 


      //Start a for loop that will loop seekbarpoints number of times. 
      for (int i = 0; i < seekbarpoints; i++ ){ 




       if ((i%2)==0) { 
        //short line 
        point = point + seekbarpoints; 
        canvas.drawLine(point, 30, point, 0, paint); 
        //drawLine(startx,startx,endy,endy) 

      } 


      //Create a new Drawable 
      Drawable d = new BitmapDrawable(getResources(),bitmap); 


      //Set the seekbar widgets background to the above drawable. 
      seekbar.setProgressDrawable(d); 





      } 
     } 

    } 

Answer 1

我一直在尋找這個很長一段時間，只有得到一個答案來繪製數字。因此我決定自己做。我採取了只有步驟的解決方案，並通過添加間隔邏輯來擴展它。

請參閱下圖。

我然後成功地創建與間隔標貼和垂直線在搜索條搜索條。上面的圖片是我所取得的。

但是，您可以在調整尺寸時使用填充進行優化。

解決方案：

的xml文件的間隔：

seekbar_with_intervals_labels

<?xml version="1.0" encoding="utf-8"?> 

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/textViewInterval" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:textColor="#707070"/> 

XML用於垂直deviders：seekbar_vertical_lines

<?xml version="1.0" encoding="utf-8"?> 

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/textViewVerticalLine" 
    android:layout_width="1dp" 
    android:layout_height="match_parent" 
    android:background="@drawable/lines" /> 

然後自定義搜索欄類：

package com.example.abc.myapplication; 

import java.util.List; 
import java.util.concurrent.locks.ReadWriteLock; 

import com.example.abc.myapplication.R; 

import android.app.Activity; 
import android.content.Context; 
import android.graphics.Color; 
import android.util.AttributeSet; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 
import android.widget.SeekBar; 
import android.widget.SeekBar.OnSeekBarChangeListener; 
import android.widget.TextView; 

public class SeekbarWithIntervals extends LinearLayout { 
    private RelativeLayout RelativeLayout = null; 
    private SeekBar Seekbar = null; 
    private RelativeLayout Divider = null; 
    private View verticalLine = null; 

    private int WidthMeasureSpec = 0; 
    private int HeightMeasureSpec = 0; 

    public SeekbarWithIntervals(Context context, AttributeSet attributeSet) { 
     super(context, attributeSet); 
    } 

    @Override 
    protected void onFinishInflate() { 
     super.onFinishInflate(); 

     getActivity().getLayoutInflater() 
       .inflate(R.layout.seekbar_with_intervals, this); 
    } 

    private Activity getActivity() { 
     return (Activity) getContext(); 
    } 

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) { 
     super.onLayout(changed, l, t, r, b); 

     verticalLine = new View(getActivity()); 
     verticalLine.setLayoutParams(new LayoutParams(2, LayoutParams.MATCH_PARENT)); 
     verticalLine.setBackgroundColor(Color.BLACK); 

     if (changed) { 
      alignIntervals(); 

      // We've changed the intervals layout, we need to refresh. 
      RelativeLayout.measure(WidthMeasureSpec, HeightMeasureSpec); 
      RelativeLayout.layout(RelativeLayout.getLeft(), RelativeLayout.getTop(), RelativeLayout.getRight(), RelativeLayout.getBottom()); 
     } 
    } 

    private void alignIntervals() { 
     int widthOfSeekbarThumb = getSeekbarThumbWidth(); 
     int thumbOffset = widthOfSeekbarThumb/2; 

     int widthOfSeekbar = getSeekbar().getWidth(); 
     int firstIntervalWidth = getRelativeLayout().getChildAt(0).getWidth(); 
     int remainingPaddableWidth = widthOfSeekbar - firstIntervalWidth - widthOfSeekbarThumb; 

     int numberOfIntervals = getSeekbar().getMax(); 
     int maximumWidthOfEachInterval = remainingPaddableWidth/numberOfIntervals; 

     alignFirstInterval(thumbOffset); 
     alignIntervalsInBetween(maximumWidthOfEachInterval); 
     alignLastInterval(thumbOffset, maximumWidthOfEachInterval); 
    } 

    private int getSeekbarThumbWidth() { 
     return getResources().getDimensionPixelOffset(R.dimen.seekbar_thumb_width); 
    } 

    private void alignFirstInterval(int offset) { 
     TextView firstInterval = (TextView) getRelativeLayout().getChildAt(0); 
     firstInterval.setPadding(offset - 10, 0, 0, 0); 

     TextView firstLine = (TextView) getDivider().getChildAt(0); 
     firstLine.setPadding(offset + 10, 0, 0, 0); 
    } 

    private void alignIntervalsInBetween(int maximumWidthOfEachInterval) { 
     int widthOfPreviousIntervalsText = 0; 
     int widthOfPreviousLine = 0; 

     // Don't align the first or last interval. 
     for (int index = 1; index < (getRelativeLayout().getChildCount() - 1); index++) { 
      TextView textViewInterval = (TextView) getRelativeLayout().getChildAt(index); 
      int widthOfText = textViewInterval.getWidth(); 

      // This works out how much left padding is needed to center the current interval. 
      //int leftPadding = Math.round(maximumWidthOfEachInterval - (widthOfText/2) - (widthOfPreviousIntervalsText/2) - (widthOfText/2)); 
      int leftPadding = Math.round(maximumWidthOfEachInterval - (widthOfText/2) - (widthOfPreviousIntervalsText/2) - (widthOfText/index) + index + 5 * 5); 

      textViewInterval.setPadding(leftPadding, 0, 0, 0); 

      widthOfPreviousIntervalsText = widthOfText; 

      TextView textViewLine = (TextView) getDivider().getChildAt(index); 
      int widthOfLine = textViewLine.getWidth(); 

      // This works out how much left padding is needed to center the current interval. 
      leftPadding = (maximumWidthOfEachInterval + (index + (maximumWidthOfEachInterval/10)) - (index * 4)); //Math.round(maximumWidthOfEachInterval + (widthOfLine) + (widthOfPreviousLine)); 
      //leftPadding = Math.round((maximumWidthOfEachInterval - (widthOfPreviousLine/index) - (widthOfPreviousLine/index) - (widthOfPreviousLine/index)) + 10); 
      textViewLine.setPadding(leftPadding , 0, 0, 0); 

      widthOfPreviousLine = widthOfLine; 
     } 
    } 

    private void alignLastInterval(int offset, int maximumWidthOfEachInterval) { 
     int lastIndex = getRelativeLayout().getChildCount() - 1; 

     TextView lastInterval = (TextView) getRelativeLayout().getChildAt(lastIndex); 
     int widthOfText = lastInterval.getWidth(); 

     int leftPadding = Math.round(maximumWidthOfEachInterval - widthOfText - offset); 
     lastInterval.setPadding(leftPadding + 20, 0, 0, 0); 

     TextView lastLine = (TextView) getDivider().getChildAt(lastIndex); 
     leftPadding = Math.round(maximumWidthOfEachInterval - (widthOfText/5) - (widthOfText/5) - (widthOfText/5) + 3 * 10); 
     lastLine.setPadding(leftPadding , 0, 0, 0); 

    } 

    protected synchronized void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) { 
     WidthMeasureSpec = widthMeasureSpec; 
     HeightMeasureSpec = heightMeasureSpec; 

     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } 

    public int getProgress() { 
     return getSeekbar().getProgress(); 
    } 

    public void setProgress(int progress) { 
     getSeekbar().setProgress(progress); 
    } 

    public void setIntervals(List<String> intervals) { 
     displayIntervals(intervals); 
     getSeekbar().setMax(intervals.size() - 1); 
    } 

    private void displayIntervals(List<String> intervals) { 
     int idOfPreviousInterval = 0; 
     int idOfPreviousLine = 0; 

     if (getRelativeLayout().getChildCount() == 0) { 
      for (String interval : intervals) { 
       TextView textViewInterval = createInterval(interval); 
       alignTextViewToRightOfPreviousInterval(textViewInterval, idOfPreviousInterval); 

       TextView textViewVerticaLine = createVerticalLine(); 
       alignTextViewToRightOfPreviousInterval(textViewVerticaLine, idOfPreviousLine); 
       idOfPreviousLine = textViewVerticaLine.getId(); 

       idOfPreviousInterval = textViewInterval.getId(); 

       getRelativeLayout().addView(textViewInterval); 
       getDivider().addView(textViewVerticaLine); 

      } 
     } 
    } 

    private TextView createInterval(String interval) { 
     View textBoxView = (View) LayoutInflater.from(getContext()) 
       .inflate(R.layout.seekbar_with_intervals_labels, null); 

     TextView textView = (TextView) textBoxView 
       .findViewById(R.id.textViewInterval); 

     textView.setId(View.generateViewId()); 
     textView.setText(interval); 

     return textView; 
    } 

    private TextView createVerticalLine() { 
     View textBoxView = (View) LayoutInflater.from(getContext()) 
       .inflate(R.layout.seekbar_vertical_lines, null); 

     TextView textView = (TextView) textBoxView 
       .findViewById(R.id.textViewVerticalLine); 

     textView.setId(View.generateViewId()); 

     return textView; 
    } 


    private void alignTextViewToRightOfPreviousInterval(TextView textView, int idOfPreviousInterval) { 
     RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 

     if (idOfPreviousInterval > 0) { 
      params.addRule(RelativeLayout.RIGHT_OF, idOfPreviousInterval); 
     } 

     textView.setLayoutParams(params); 
    } 

    public void setOnSeekBarChangeListener(OnSeekBarChangeListener onSeekBarChangeListener) { 
     getSeekbar().setOnSeekBarChangeListener(onSeekBarChangeListener); 
    } 

    private RelativeLayout getRelativeLayout() { 
     if (RelativeLayout == null) { 
      RelativeLayout = (RelativeLayout) findViewById(R.id.intervals); 
     } 

     return RelativeLayout; 
    } 

    private SeekBar getSeekbar() { 
     if (Seekbar == null) { 
      Seekbar = (SeekBar) findViewById(R.id.seekbar); 
     } 

     return Seekbar; 
    } 

    private RelativeLayout getDivider() { 

     if (Divider == null) { 
      Divider = (RelativeLayout) findViewById(R.id.fl_divider); 
     } 

     return Divider; 
    } 
} 

然後MainActivity我們動態地添加的時間間隔。

public class MainActivity extends AppCompatActivity { 

    private SeekbarWithIntervals SeekbarWithIntervals = null; 

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

     List<String> seekbarIntervals = getIntervals(); 
     getSeekbarWithIntervals().setIntervals(seekbarIntervals); 
    } 

    private List<String> getIntervals() { 
     return new ArrayList<String>() {{ 
      add("45"); 
      add("55"); 
      add("65"); 
      add("75"); 
      add("85"); 
      add("95"); 
     }}; 
    } 

    private SeekbarWithIntervals getSeekbarWithIntervals() { 
     if (SeekbarWithIntervals == null) { 
      SeekbarWithIntervals = (SeekbarWithIntervals) findViewById(R.id.seekbarWithIntervals); 
     } 

     return SeekbarWithIntervals; 
    } 
} 

你可以把填充的分隔器底部，以便像你的形象向上推。

注意：您也可以有一個佈局定義分隔線和數字佈局。