Please help me..
How to arrange gameobject or UI to become like the screenshot and make it scrollable using scroll rect ?
The UI must be arrange like screenshot.
There is a border yellow contain the UI and it must be scroollable.
and then there is a cyan border contain 5 Slot item or more and scrollable too. it can be generate automatically or manual.
And then there is a magenta border contain 3 button UI. Button 1, button 2, and button 3. Each button have different size.
Why it must be scrollable ? Because The Cyan border Contain and the Magenta border contain can be more than one. So if it not scrollable then the object wouldn't enough to show in the yellow border box.
I have try to make it for 1 day and i can't finish it.
Please help me how to finish it and how to make it step by step.
if you have any question just comment it.
Thanks A lot
I found the answer myself.
That is how it work.
Create Gameobject Name Panelprocess
In the Panelprocess add component : image, mask and scroll rect
Create child Gameobject Panelproceess Name ListProcess
In the ListProcess add component : Grid Layout Group and contain size fitter
at Grid Layout Group component set the value like below :
cell size : x ( 285 ) y ( 65 )
constraint : fixed column count
constraint count : 1
at Contain size fitter set the value like below :
horizontal fit : preffered size
vertical fit : preffered size
Create child Gameobject ListProcess Name Item1 (UI Image), Button1 (UI Image), Item2 (UI Image), Button2 (UI Image)
Create child Gameobject Item1 Name Slot1 (UI Image), Slot2 (UI Image), Slot3 (UI Image), Slot4 (UI Image), Slot5 (UI Image)
Note : Arrange the position and size of slot according to the screenshot
Do step 4 for Item2 too
Create child Gameobject BUtton1 Name Btn1, Btn2, Btn3
Note : Arrange the position and size of each btn1, btn2, btn3 accroding to
the screenshot.
Do step 5 for Button2 too
Back to gameobject Panelprocess
at Panelprocess component :
Scroll Rect (set the setting like below) :
content : (Drag the ListProcess gameobject to content)
Horizontal : unchecked
vertical : checked
MOvement Type : Elastic
Now Play it.
The Grid Layout Group now contain and object with a different size and scrollable.
Done
Related
How do I get the 0 width to be equal size with 1 and 2
( . ) to be equal width as 3 and = to be equal width with +?
I can't drag the white square (When clicking the UI button) to resize them.
Screenshot of my storyboard:
Follow Steps
Focus on stack view contain the elements "0 . ="
select ". =" element and embed into a stack view
StackView properties must be "Alignment = Fill", "Distribution = Fill Equally" and "Spacing" as per other elements
Option1
Set the StackView to Distribution Fill and then control drag the 0 Button onto the . Button. Select Equal Widths and then set the Multiplier (times 2 since it should be twice the size) in the Size Inspector.
Option2
Put the .Button and the = Button in an equally filled StackView and then the 0 Button and the StackView in another equally filled StackView. This is probably the better option if it's a 50-50 distribution.
I've got a game object (InfoBox) with a..
Vertical Layout Group (Padding 20 on all sides, Control Child Size Height active)
an image
a Content Size Fitter (Vertical Fit set to Preferred Size, Horizontal Unconstrained)
Inside this InfoBox is a Text-Element and every time I update the text, I want the InfoBox to expand or collapse, but to the bottom only. Right now my InfoBox always expands or collapses to both top and bottom, but I don't want that to happen. How can I achieve that? I added some screenshots to better visualise this.
These are my settings for the InfoBox:
And these are my settings for the text:
And this is what happens when I use for example less text, the box collapses from bottom and top, but I want it to stay fixed at the top (on the same line as the green box next to it) and only collapse on the bottom:
Any help is really appreciate!
You main issues looks like you are using a ContentSizeFitter also on the parent object. So it depends how this parent object is aligned with its according parent.
This sentence sounds strange I know but what you did is basically shifting up the alignment responsibility to the parent.
=> Make your UI element aligned to the top and grow downwards.
All you need to do for this is either set
Anchors Min y -> 1
Anchors Max y -> 1
Pivot y -> 1
or simply go to the RectTransform Inspector, open the alignment tool and hold Shift + Alt and click on the top alignment:
For the second instead of using the ContentSizeFitter I prefer to have my own script that only does what it should and nothing more.
You can get the preferredHeight which is exactly the value you are looking for.
The following script simply always applies the preferred height to the text rect. Using [ExecuteAlways] this also works in edit mode. Simply attach it on the same GameObject as the UI.Text component
[ExecuteAlways]
[RequireComponent(typeof(Text))]
[RequireComponent(typeof(RectTransform))]
public class TextHeightFitter : MonoBehaviour
{
[SerializeField] private RectTransform _rectTransform;
[SerializeField] private Text _text;
private void Update()
{
if (!_text) _text = GetComponent<Text>();
if (!_rectTransform) _rectTransform = GetComponent<RectTransform>();
var desiredHeight = _text.preferredHeight;
var size = _rectTransform.sizeDelta;
size.y = desiredHeight;
_rectTransform.sizeDelta = size;
}
}
I would like to get bigger size of sap.suite.ui.microchart.HarveyBallMicroChart nested in the sap.m.CustomTile than is max "L" size:
var oChart = new sap.suite.ui.microchart.HarveyBallMicroChart({
size: sap.m.Size.L,
});
I would like to stretch out chart to the bottom and right side of the tile. Now it is (demo):
Thanks for any hint. I was also playing with the height and width property of HarveyBallMicroChart but nothing changed.
The poroperty I was looking for was isResponsive.
I am trying to free text Annotation string align in center of rectangle but always set in top left corner
PdfContentByte pcb = stamper.getOverContent(page);
PdfAnnotation annotation = PdfAnnotation.createFreeText(stamper.getWriter(), rectangle, "Mayank Pandey", pcb);
annotation.put(PdfName.Q, new PdfNumber(PdfFormField.Element.ALIGN_MIDDLE));
Text showing left top corner in pdf:
You set
annotation.put(PdfName.Q, new PdfNumber(PdfFormField.Element.ALIGN_MIDDLE));
The constant Element.ALIGN_MIDDLE is defined as
/**
* A possible value for vertical alignment.
*/
public static final int ALIGN_MIDDLE = 5;
But the value of Q in free text annotations is specified as:
Q
integer
(Optional; PDF 1.4) A code specifying the form of quadding (justification) that shall be used in displaying the annotation’s text:
0 Left-justified
1 Centered
2 Right-justified
Default value: 0 (left-justified).
Thus, value 5 you used is not a valid Quadding value at all!
Furthermore, FreeText Quadding does not even support what you want to achieve, to align in center of rectangle, it only allows to select horizontal alignment, not vertical alignment.
For your objective, therefore, you'll have to use a custom appearance (which takes precedence if present).
I have a view Controller that contains filter_View
and a tableView_Players
.
When I press the button "Filter la recherche"
I want the Filter_View to expand this way
and results moving the tableview down
.
How to do that ? thanks in advance :)
If you are using AutoLayout, do following :
1) set vertical spacing from tableView to filterView.
2) set Height Constraint of filterView and set its outlet.
3) Initially that height constraint e.g. heightOfFilterview.constant = x
4) While clicking filter la button set heightOfFilterView.constant = y (Whatever you want).