在ViewPager中绘制矩形

时间:2013-12-15 23:49:39

标签: android android-canvas

在ViewPager中动态绘制矩形最好的是什么?我可以在ViewPager使用的xml中添加画布吗?如果是这样,它将如何实施?

FragmentActivity:

public class Tabs extends FragmentActivity {
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tabs);
    }
}

我正在使用的FragmentPagerAdapter方法:

private class ScreenSlidePagerAdapter extends FragmentPagerAdapter {
    public ScreenSlidePagerAdapter(android.support.v4.app.FragmentManager fm) {
        super(fm);
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return ScreenSlidePageFragment.create(position);
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}

这是我对ViewPager

的片段
public class ScreenSlidePageFragment extends Fragment {
/**
 * The argument key for the page number this fragment represents.
 */
public static final String ARG_PAGE = "page";
public static TextView personalTextView, cityTextView;

ViewGroup rootView = null;

/**
 * The fragment's page number, which is set to the argument value for {@link #ARG_PAGE}.
 */
private int mPageNumber;
private boolean isExanded;

/**
 * Factory method for this fragment class. Constructs a new fragment for the given page number.
 */
public static Fragment create(int position) {
    ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_PAGE, position);
    fragment.setArguments(args);
    return fragment;
}

public ScreenSlidePageFragment() {
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mPageNumber = getArguments().getInt(ARG_PAGE);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // Inflate the layout containing a title and body text.

    if(mPageNumber + 1==1){
        rootView = (ViewGroup) inflater
                .inflate(R.layout.fragment_screen_slide_page, container, false);


    }else if(mPageNumber + 1==2){
        rootView = (ViewGroup) inflater
                .inflate(R.layout.fragment_screen_slide_page2, container, false);

    }else if(mPageNumber + 1==3){
        rootView = (ViewGroup) inflater
                .inflate(R.layout.fragment_screen_slide_page3, container, false);

    }else if(mPageNumber + 1==4){
        rootView = (ViewGroup) inflater
                .inflate(R.layout.fragment_screen_slide_page4, container, false);

    }


    return rootView;
}


/**
 * Returns the page number represented by this fragment object.
 */
public int getPageNumber() {
    return mPageNumber;
}

}

下面是我正在使用的fragment_screen_slide_page.xml:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mySwitch="http://schemas.android.com/apk/res-auto"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="158dp"
    android:orientation="vertical"
    android:padding="16dp" >

    <!-- Need to add a rectangle here -->
    <!-- This is the rectangle view I'm trying to draw with -->
            <com.draw.DrawBudget
         android:id="@+id/budget"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"/>
    <TextView
        android:id="@+id/texttop"
        style="?android:textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:gravity="center_horizontal"
        android:text="BUDGET PLANNER"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/texttop"
        android:src="@drawable/arrow" />

    <EditText
        android:id="@+id/vnosEmaila"
        android:layout_width="100dip"
        android:layout_height="20dip"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignLeft="@+id/textView1"
        android:layout_alignTop="@+id/textView1"
        android:layout_marginLeft="99dp"
        android:paddingBottom="0dp"
        android:paddingTop="0dp"
        android:text="$60.00"
        android:textSize="12sp" />

     <TextView
         android:id="@+id/textView1"
         style="?android:textAppearanceSmall"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_below="@+id/arrow"
         android:layout_toLeftOf="@+id/arrow"
         android:lineSpacingMultiplier="1.2"
         android:paddingTop="2dip"
         android:text="Spending Goal" />

     <com.utility.less.MySwitch
         android:id="@+id/switch2"
         style="@style/mySwitchStyle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:gravity="center"
         mySwitch:textOff="ON"
         mySwitch:textOn="OFF"
         mySwitch:textOnThumb="false"
         mySwitch:thumb="@drawable/switch_thumb"
         mySwitch:track="@drawable/switch_track" />

     <TextView
         android:id="@+id/days"
         style="?android:textAppearanceSmall"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignParentBottom="true"
         android:lineSpacingMultiplier="1.2"
         android:paddingTop="2dip"
         android:text="24 days left" />

</RelativeLayout>

这是我创建的用于绘制矩形的自定义视图。虽然不行。

public class DrawBudget extends View {

Paint paint = new Paint();
Canvas mCanvas;

public DrawBudget(Context context) {
super(context);
}

public DrawBudget(Context context, AttributeSet attrs) {
super(context, attrs);
}   


@Override
protected void onDraw(Canvas canvas) { 
    mCanvas = canvas;
super.onDraw(canvas);
    paint.setColor(Color.GREEN);
    canvas.drawRect(0, 100, 100, 0, paint);
}
}

1 个答案:

答案 0 :(得分:1)

您应该能够简单地覆盖onDraw()并绘制矩形。您需要创建一个Paint对象以便在绘制期间使用,您可以在构造函数中执行此操作。

private Paint rectColor = new Paint();
rectColor.setColor (...);

然后,你需要绘制矩形:

@Override
protected void  onDraw (Canvas canvas) 
{
  super.onDraw (canvas);
  canvas.drawRect (..., rectColor);
}