如何在android中的饼图中添加背景文字?

时间:2014-09-24 10:44:09

标签: android android-layout android-fragments android-graphview

我在android片段中使用以下代码创建了一个饼图,这个程序创建了一个饼图,其中预定比例的圆和填充片之间的填充,我想添加文本作为下面提到的图像,这是代码我尝试过:

public class PieFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    final View v = inflater.inflate(R.layout.fragment_piegraph, container, false);
    final Resources resources = getResources();
    final PieGraph pg = (PieGraph) v.findViewById(R.id.piegraph);
    final Button animateButton = (Button) v.findViewById(R.id.animatePieButton);

    PieSlice slice = new PieSlice();
    slice.setColor(resources.getColor(R.color.green_light));
    slice.setSelectedColor(resources.getColor(R.color.transparent_orange));
    slice.setValue(2);
    slice.setTitle("first");
    pg.addSlice(slice);

    slice = new PieSlice();
    slice.setColor(resources.getColor(R.color.orange));
    slice.setValue(3);
    pg.addSlice(slice);

  /*  slice = new PieSlice();
    slice.setColor(resources.getColor(R.color.purple));
    slice.setValue(8);
    pg.addSlice(slice);*/
    pg.setOnSliceClickedListener(new OnSliceClickedListener() {

        @Override
        public void onClick(int index) {
            Toast.makeText(getActivity(),
                    "Slice " + index + " clicked",
                    Toast.LENGTH_SHORT)
                    .show();
        }
    });

    Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
    pg.setBackgroundBitmap(b);

    SeekBar seekBar = (SeekBar) v.findViewById(R.id.seekBarRatio);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            pg.setInnerCircleRatio(progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

    seekBar = (SeekBar) v.findViewById(R.id.seekBarPadding);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            pg.setPadding(progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

    if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR1)
    animateButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            for (PieSlice s : pg.getSlices())
                s.setGoalValue((float)Math.random() * 10);
            pg.setDuration(1000);//default if unspecified is 300 ms
            pg.setInterpolator(new AccelerateDecelerateInterpolator());//default if unspecified is linear; constant speed
            pg.setAnimationListener(getAnimationListener());
            pg.animateToGoalValues();//animation will always overwrite. Pass true to call the onAnimationCancel Listener with onAnimationEnd

        }
    });
    return v;
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
public Animator.AnimatorListener getAnimationListener(){
    if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR1)
    return new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            Log.d("piefrag", "anim end");
        }

        @Override
        public void onAnimationCancel(Animator animation) {//you might want to call slice.setvalue(slice.getGoalValue)
            Log.d("piefrag", "anim cancel");
        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };
    else return null;

}}

当我运行它时,它看起来如下

result

和xml如下

<?xml version="1.0" encoding="utf-8"?>    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.echo.holographlibrary.PieGraph
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:layout_margin="@dimen/default_margin"
    android:id="@+id/piegraph"
    app:pieInnerCircleRatio="195"
    app:pieSlicePadding="0dip"/>
<LinearLayout
    android:orientation="horizontal"
    android:layout_margin="@dimen/default_margin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:text="Inner Circle Ratio"
        android:layout_weight="1"/>
    <SeekBar
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:progress="128"
        android:max="240"
        android:id="@+id/seekBarRatio"
        android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
    android:orientation="horizontal"
    android:layout_margin="@dimen/default_margin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:text="Padding"
        android:layout_weight="1"/>
    <SeekBar
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:progress="0"
    android:max="10"
    android:id="@+id/seekBarPadding"
    android:layout_weight="1"/>
</LinearLayout>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Animate to random values"
    android:id="@+id/animatePieButton"
    android:layout_weight="0"/>    </LinearLayout>

如何将文本添加到此饼图中,如下图所示

chart image

我尝试在饼图附近添加文本视图,但它没有显示。需要解决方案

1 个答案:

答案 0 :(得分:2)

要在饼图中放置组件,请使用如下所示的相对布局:

<RelativeLayout
                android:id="@+id/target_info_lay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >

                <package.PieGraph
                    android:id="@+id/piegraph"
                    android:layout_width="100dp"
                    android:layout_height="100dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="5"
                        android:textColor="@color/black"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="1dp"
                        android:gravity="center"
                        android:background="@drawable/line"
                        android:textColor="@color/black" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="10"
                        android:textColor="@color/black" />
                </LinearLayout>
            </RelativeLayout>