Question

我得到了以下import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import OutlinedInput from "@material-ui/core/OutlinedInput"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; const useStyles = makeStyles(theme => ({ root: { display: "flex", flexWrap: "wrap" }, formControl: { margin: theme.spacing(1), minWidth: 120 }, selectEmpty: { marginTop: theme.spacing(2) } })); function SimpleSelect() { const classes = useStyles(); const [values, setValues] = React.useState({ age: "" }); const inputLabel = React.useRef(null); const [labelWidth, setLabelWidth] = React.useState(0); React.useEffect(() => { setLabelWidth(inputLabel.current.offsetWidth); }, []); function handleChange(event) { setValues(oldValues => ({ ...oldValues, [event.target.name]: event.target.value })); } return ( <form className={classes.root} autoComplete="off"> <FormControl variant="outlined" className={classes.formControl}> <InputLabel shrink ref={inputLabel} htmlFor="outlined-age-always-notched" > Age </InputLabel> <Select value={values.age} onChange={handleChange} input={ <OutlinedInput notched labelWidth={labelWidth} name="age" id="outlined-age-always-notched" /> } > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> <FormControl variant="outlined" className={classes.formControl}> <InputLabel ref={inputLabel} htmlFor="outlined-age-simple"> Age </InputLabel> <Select value={values.age} onChange={handleChange} input={ <OutlinedInput labelWidth={labelWidth} name="age" id="outlined-age-simple" /> } > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> </form> ); } export default SimpleSelect;：

customViews

这2个文本如下val paintTextTypology = Paint() val paintTextDate = Paint()：

我要实现的结果是：

因此，我想将文本向右对齐，但是由于文本是分开的，所以我认为我必须创建一个动态customViews才能将它们与父级的右边对齐。（我负担不起RelativeLayout，因为文本可以更改。）我该怎么办？

Answer 1

根据您的评论（由于我不知道您的自定义视图是什么，所以我还不是100％清楚），我将使用看起来像这样的ConstraintLayout：

红色矩形是您的图片。然后，我添加了两个与图像对齐的textViews。您可以玩它，看看还有什么需要。（这是一种简化）。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    >
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is textView One"
        app:layout_constraintEnd_toStartOf="@id/image"
        app:layout_constraintTop_toTopOf="@+id/image"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is textView Two -> longer"
        app:layout_constraintEnd_toStartOf="@id/image"
        app:layout_constraintTop_toBottomOf="@id/text1"
        />
    <ImageView
        android:id="@+id/image"
        android:layout_width="150dp"
        android:layout_height="300dp"
        android:contentDescription="TODO"
        android:src="@color/emphasis_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</android.support.constraint.ConstraintLayout>

这看起来像这样：

如何将2个customViews放入动态RelativeLayout中？

1 个答案: